Question

我在点击某个对象时尝试使用事件监听器。

我的HTML文件

size_t n = strlen(work);
if(n>0 && work[n-1] == '\n')
{
   work[n-1] = '\0';
}

我的JavaScript文件

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

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

我的问题是，为什么我的功能会在我运行页面后立即运行，而不是等到我点击左边或右边的div？

感谢!!!

Answer 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函数作为引用，浏览器将在click事件中调用该函数。在函数内部，我们调用自己的函数changeImg。

Answer 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);

事件监听器麻烦

2 个答案: