addEventListener("click",...) 立即触发 [重复]答案

【问题标题】：addEventListener("click",...) firing immediately [duplicate]addEventListener("click",...) 立即触发 [重复]
【发布时间】：2016-02-27 08:02:24
【问题描述】：

我正在尝试创建一些放置适当的说明工具提示，用户可以点击这些提示来了解网站界面的工作原理。每个工具提示都有一个“下一个”链接，通过修改类（因此，css）来切换上一个和下一个工具提示的可见性。

下面是一些应该执行此操作的简化代码：

function displayTooltip(t){
  //...some code to determine the tooltip IDs "next" and "previous"
  document.getElementById(previous).className = "tooltip invisibleTooltip";
  document.getElementById(next).className = "tooltip";
}

document.getElementById("tooltip-link1").addEventListener("click", displayTooltip(2));

displayTooltip 在我将此代码粘贴到控制台（或页面加载时）时立即调用（并正确切换类）。如果我用alert() 替换displayTooltip，它会在我点击时触发，正如预期的那样。我做错了什么？

【问题讨论】：

当你说 document.getElementById("tooltip-link1").addEventListener("click", displayTooltip(2));您只在那里调用该方法，因此它会立即执行
将displayTooltip(2) 更改为displayTooltip.bind(null, 2)。有关解释，请参见下面的答案。

标签： javascript html

【解决方案1】：

当您绑定事件时，您是calling 函数document.getElementById("tooltip-link1").addEventListener("click",displayTooltip(2));

你需要传递对函数的引用。

改为下面

document.getElementById("tooltip-link1").addEventListener("click", function(){
   displayTooltip(2)
});

【讨论】：

谢谢。您对调用和传递引用之间区别的解释使发生的事情可以理解（我认为 addEventListener 接受引用，而不是函数它们）。
谢谢。这就是我一直在寻找的。没有教程解释这一点。
非常感谢您，我一直在寻找整个互联网！！！！

【解决方案2】：

当你写functionName后跟()时，它会调用函数。如果您希望将功能分配给处理程序，您应该这样做

document.getElementById("tooltip-link1").addEventListener("click", displayTooltip);

现在如果你想给这个函数传递参数，你可以把它包裹在一个函数中，比如

document.getElementById("tooltip-link1")
  .addEventListener("click", function(){displayTooltip(2)});

或者你可以使用.bind()

document.getElementById("tooltip-link1")
  .addEventListener("click", displayTooltip.bind(this, 2));

【讨论】：

【解决方案3】：

您需要将此方法作为回调调用。由于您将其称为 displayTooltip(2)，因此您最终会在该行调用该函数。

您需要做的是绑定回调而不是在该行调用。像

 .addEventListener('event', function()
     { displayTooltip(2) }

希望对你有所帮助

快乐学习

【讨论】：