Javascript 代码在启动时运行一次（addEventListener 不起作用）答案

【问题标题】：Javascript code runs at launch once (addEventListener not working)Javascript 代码在启动时运行一次（addEventListener 不起作用）
【发布时间】：2016-12-26 11:38:53
【问题描述】：

这只在启动时运行一次，我不明白发生了什么。抱歉，如果格式不正确，这是我的第一个问题。

这是html代码：

<!DOCTYPE html>

<html>
<head>

<title>Clicker</title>

</head>

<body>

<ul>
    <li>Mouse</li>
    <li>DangerMouse</li>
    <li>Brain</li>
    <li>Ratata</li>
</ul>
<img id="mouseElem" src="https://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="whoops" style="width:304ps;height:228px;">
<button type="button">Mouse1</button>
<button type="button">DangerMouse</button>
<button type="button">Brain</button>
<button type="button">Ratata</button>
<h2>Mouse</h2>
<p>Number of Clicks: </p>
<div id="presentClicks"><p></p></div>

<script src="js/javardscript.js"></script>

</body>
</html>

这是javascript代码

var clickerCounter = 0;

//document.getElementById('presentClicks').innerHTML = clickerCounter;
document.getElementById('presentClicks').addEventListener('click', addClick(clickerCounter));
document.getElementById('mouseElem').addEventListener('click', boogaFunction());

function boogaFunction() {
    alert("booga");
}

function addClick(clickerCounter) {
    clickerCounter++;
    document.getElementById('presentClicks').innerHTML = clickerCounter;
}

【问题讨论】：

document.get....('click', boogaFunction()); 这里不调用 boogaFunction，只发送参考。即('click', boogaFunction)
javascript addEventlistener "click" not working的可能重复

标签： javascript html addeventlistener

【解决方案1】：

根据https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener，arget.addEventListener(type, listener, [options]); 需要一个监听器。

听众当指定类型的事件发生时接收通知的对象（实现Event接口的对象）。这必须是一个实现 EventListener 接口的对象，或者只是一个 JavaScript 函数。

因此，你必须引用函数，而不是函数的结果。

document.getElementById('presentClicks').addEventListener('click', addClick);
document.getElementById('mouseElem').addEventListener('click', boogaFunction);

应重构以下内容，以从其闭包中获取clickCounter。

function addClick() {
    clickerCounter++;
    document.getElementById('presentClicks').innerHTML = clickerCounter;
}

【讨论】：

谢谢你，贷款，这很有帮助！

【解决方案2】：

这里的问题是你可能不明白如何给事件监听器添加回调函数。

你可以这样更正它（没有()，这意味着你只需要引用函数回调）：

document.getElementById('mouseElem').addEventListener('click', boogaFunction);

对于需要传递参数的回调，你不能像上面的解决方案那样做，你需要特殊的方法来处理它 - 使用bind 方法：

document.getElementById('presentClicks').addEventListener('click', addClick.bind(this, clickerCounter));

更多信息，您可以查看how to pass parameters to callback functions。

希望有所帮助；）

【讨论】：

【解决方案3】：

你的 JS 有错误

你可以这样改：

var clickerCounter = 0;

//document.getElementById('presentClicks').innerHTML = clickerCounter;
document.getElementById('presentClicks').addEventListener('click', function (){
    addClick(clickerCounter);
});
document.getElementById('mouseElem').addEventListener('click', boogaFunction);

function boogaFunction() {
    alert("booga");
}

function addClick(clickerCounter) {
    clickerCounter++;
    document.getElementById('presentClicks').innerHTML = clickerCounter;
}

【讨论】：

【解决方案4】：

你应该写：

document.getElementById('presentClicks').addEventListener('click', addClick);
document.getElementById('mouseElem').addEventListener('click', boogaFunction);

只有addEventListener监听事件名称，不带“()”

【讨论】：

而这个addClick函数不能有参数（如:clickerCounter）；