Question

我遇到了这个问题，当处理程序作为内联函数调用提供时，JavaScript事件处理程序将按预期调用，但是在响应事件时调用另一个函数时它不能按预期工作。我不确定为什么它会这样表现，如果有人可以解释的话会很棒。谢谢。

<html>
<head>
</head>
<body>
  Name: <input type="text" id="text1"> Hello World!
  <script>
  var i= 0;
 function myFun()
 {
    i++;
   console.log('got key up event  ' + i);
 }    
 var textElem = document.getElementById('text1');
 //below works as expected  ie. prints 'got key up event 1', 'got key up     
   event 2' .. on console
 //textElem.addEventListener('keyup', function () {i++; console.log('got   key up event ' + i);});

 //If we comment above call and use below - textElem.addEventListener...
 // it does not work as expected it only logs 'got key up event 1' on page load
// after that it (myFun) is not getting called even if i press key on text box. 
 //textElem.addEventListener('keyup', myFun() );
</script>
</body>
</html>

Answer 1

尝试：

textElem.addEventListener('keyup', myFun );

即。 myFun没有()

addEventListener期待一个函数作为第二个参数。如果你传递myFun()，浏览器会评估函数（这里你得到got key up event 1），但是函数没有返回任何内容，所以没有添加实际的事件监听器。

当你传递myFun时，实际的功能被添加为事件监听器。

Javascript事件处理程序未按预期触发

1 个答案: