Javascript addEventListener（“单击”，…）立即启动

我正在尝试创建一些适当放置的指导工具提示，用户通过单击来了解站点界面的工作方式。每个工具提示都有一个“下一个”链接，该链接通过修改类（以及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（）

，它会在我单击时触发，正如预期的那样。我做错了什么？

当您绑定事件时，您正在调用函数

document.getElementById（“tooltip-link1”）。addEventListener（“单击”，显示tooltip（2））

您需要传递对函数的引用

改到下面

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

当您编写
functionName
后跟
（）
时，它将调用函数。如果您希望将函数分配给处理程序，您应该这样做

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

现在，如果您希望将参数传递给这个函数，您可以将它包装到一个函数中，如

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

或者您可以使用
.bind（）

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

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

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

希望这能有所帮助

快乐学习
当你说document.getElementById（“tooltip-link1”）。addEventListener（“单击”，显示tooltip（2））；您只在那里调用该方法，因此它会立即将
displayTooltip（2）
更改为
displayTooltip.bind（null，2）
。有关解释，请参见下面的答案。谢谢。您对呼叫和传递引用之间的区别的解释使发生的事情可以理解（我认为addEventListener接受了引用，而不是函数本身）。谢谢。这就是我要找的。没有教程解释这一点。
 .addEventListener('event', function()
     { displayTooltip(2) }