IT技术 - addEventListener("click",...) 立即触发 - 吾爱随笔录

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

IT技术 javascript html

2021-01-30 21:24:34

我正在尝试创建一些适当放置的说明性工具提示，用户单击这些提示可以了解站点界面的工作原理。每个工具提示都有一个“下一个”链接，通过修改类（以及 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()，它会在我点击时触发，正如预期的那样。我究竟做错了什么？

3个回答

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

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

改成下面

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

谢谢。这就是我一直在寻找的。没有教程解释这一点。

2021-04-01 21:24:34

谢谢。您对调用和传递引用之间差异的解释使正在发生的事情变得可以理解（我认为 addEventListener 接受引用，而不是函数本身）。

2021-04-10 21:24:34

当你写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));

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

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

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

希望这会有所帮助

快乐学习

其它你可能感兴趣的问题

上一篇javascript搜索数组数组下一篇<iframe> javascript 跨域访问父DOM？