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(),当我点击,如预期触发.我究竟做错了什么？

Answer 1

当你绑定事件时,你就是calling这个功能document.getElementById("tooltip-link1").addEventListener("click",displayTooltip(2));

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

改为以下

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

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