JavaScript 点击事件处理程序在未点击时触发

Question

为什么没有点击指定的按钮，这个函数还会被触发？ 我查看了几个类似的问题，但都没有处理这种代码结构（可能是我漏掉的明显原因...）。

为什么没有点击指定的按钮，这个函数还会被触发？ 我看过一些类似的问题，但没有一个涉及到这种代码结构（可能有我没有注意到的明显原因...）。

document.getElementById("main_btn").addEventListener("click", hideId("main");

function hideId(data) {
    document.getElementById(data).style.display = "none";
    console.log("hidden element #"+data);
}

- Mark Vonk

---

使用html的onClick标签，我应该发布一个答案吗？ - Abishek V Ashok

Answer 1

你正在直接调用它。

document.getElementById("main_btn").addEventListener("click", hideId("main");

你应该在回调函数中执行这个操作。

document.getElementById("main_btn").addEventListener("click", function (){
    hideId("main");
});

- Suresh Atta

---

这个好使了，谢谢！现在一切都清楚了，我之前看到过这种解决方案几次，但我不明白为什么必须在另一个函数中调用这个函数。但我猜你是告诉事件处理程序在点击后执行该函数，而不是只把它放在那里自己执行。 - Mark Vonk

Answer 2

这段代码会执行你的函数hideId("main")，你只需要传递回调函数的名称即可：

document.getElementById("main_btn").addEventListener("click", hideId);

function hideId(event) {
    var id = event.target.srcElement.id; // get the id of the clicked element
    document.getElementById(data).style.display = "none";
    console.log("hidden element #"+data);
}

- Devid Farinelli

Answer 3

document.getElementById("main_btn").addEventListener("click", hideId.bind(null, "main");

- stackoverflow

---

虽然这段代码可能回答了问题，但是提供关于它如何或为什么解决问题的额外背景信息会增加答案的长期价值。 - Donald Duck