事件监听器故障答案

【问题标题】：Event Listener Trouble事件监听器故障
【发布时间】：2016-05-20 06:10:44
【问题描述】：

我正在尝试在单击对象时使用事件侦听器。

我的 HTML 文件

<div id="left">
</div>
<div id="right">
</div>

我的 JavaScript 文件

function changeImg(which)
{
  if(which === "left")
  {
     alert("left");
  }
  else
  {
     alert("right");
  }
}

var leftClick = document.getElementById("left");
leftClick.addEventListener("click", changeImg("left"), true);

var rightClick = document.getElementById("right");
rightClick.addEventListener("click", changeImg("right"), false);

这是我的 JSFiddle，https://jsfiddle.net/pb4759jh68/zqzdhcnw/1/

我的问题是，为什么我的函数一运行页面就运行，而不是等到我点击左侧或右侧 div 时才运行？

谢谢！！！

【问题讨论】：

标签： javascript

【解决方案1】：

问题在于这两行：

leftClick.addEventListener("click", changeImg("left"), true);
rightClick.addEventListener("click", changeImg("right"), false);

changeImg 函数被立即调用，因为您在函数名后面使用了括号。你可以这样做来防止它：

var leftClick = document.getElementById("left");
leftClick.addEventListener("click", function() {
    changeImg('left');
}, true);

var rightClick = document.getElementById("right");
rightClick.addEventListener("click", function() {
    changeImg('right');
}, false);

在这里，我们传递一个anonymous 函数作为引用，浏览器会在点击事件时调用该函数。在函数内部，我们调用了我们自己的函数changeImg。

【讨论】：

【解决方案2】：

addEventListener 需要一个函数作为第二个参数。您当前正在评估处理函数 changeImg("left")，并将结果分配为事件处理程序。试试这个：

var leftClick = document.getElementById("left");
leftClick.addEventListener("click", function() { return changeImg("left") }, true);

var rightClick = document.getElementById("right");
rightClick.addEventListener("click", function() { return changeImg("right") }, false);

【讨论】：