addEventListener("click",...) 立即触发

Question

我正在尝试创建一些适当放置的指导性工具提示，用户可以点击这些提示来了解站点界面的工作原理。每个工具提示都有一个“下一个”链接，该链接通过修改类（以及 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 当我将此代码粘贴到控制台（或在页面加载时）时，立即调用（并正确切换类）。如果我将 displayTooltip 替换为 alert() ，它会在我点击时触发，正如预期的那样。我究竟做错了什么？

原文由 Escher 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

您需要传递对该函数的引用。

改成下面

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

原文由 Jagdish Idhate 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Rajesh 发布，翻译遵循 CC BY-SA 3.0 许可协议