Question

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

这是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;
}

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

Answer 2

这里的问题是您可能不了解如何将回调函数添加到事件侦听器。

你可以像那样纠正它（没有due_check_data，这意味着你只需要引用函数回调）：

()

使用需要传递参数的回调，你不能像上面的解决方案那样做，你需要特殊的方法 - 使用document.getElementById('mouseElem').addEventListener('click', boogaFunction);方法：

bind

有关详细信息，请查看how to pass parameters to callback functions。

希望有所帮助;）

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

Answer 4

你应该写：

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

仅addEventListener个侦听器事件名称，而不是＆＃34;（）＆＃34;

Javascript代码在启动时运行一次（addEventListener不工作）

4 个答案: