检查元素上是否有事件侦听器。没有 jQuery

IT技术 javascript
2021-02-26 03:28:06

如果我像下面的代码那样使用内联函数,如何检查元素上是否有事件侦听器?因为我有一个函数可以调用该函数并添加事件侦听器,但是它会导致重复事件侦听器导致它两次触发一个函数。如果它已经存在,我该如何检查它以便我可以阻止它添加事件侦听器?

for (var a = 0;a<formFieldInput.length;a++) {
    if(formFieldInput[a].hasAttribute("name") && formFieldInput[a].attributes.title.value !== "Valid Until") {
        formFieldInput[a].addEventListener("click",function(event) {
            toggleFieldList(event,"show");
        });
    }
3个回答

现在(2016 年)在 Chrome Dev Tools 控制台中,您可以快速执行下面的此功能以显示已附加到元素的所有事件侦听器。

getEventListeners(document.querySelector('your-element-selector'));
这对我很有效。谢谢!
2021-04-20 03:28:06
@Anthony 正如我上面提到的,它只适用于 Chrome 开发工具
2021-04-30 03:28:06
此解决方案是跨浏览器还是仅 chrome?
2021-05-01 03:28:06
jQuery 中的快速方法: getEventListeners($('your-element-selector')[0]); 还将列出带有开发工具中元素事件的数组。
2021-05-05 03:28:06
请修正此答案中的语法。我批准了编辑。然后海报修改了我的一个更改并拒绝了另一个语法修复。“这些天”在语法上是不正确的。在发帖人修改了他们的答案后,我尝试再次修复更改,但我的第二次编辑被拒绝,即使它的内容与我原始编辑中批准的内容相同。
2021-05-07 03:28:06

没有 JavaScript 函数可以实现这一点。但是,您可以true在添加侦听器和false删除侦听器时设置一个布尔值然后在可能添加重复的事件侦听器之前检查此布尔值。

可能重复:如何检查动态附加的事件侦听器是否存在?

@SebastienDaniel - 是的,这就是我的意思,DOM ..
2021-04-18 03:28:06
简单而高效,谢谢我被困在无法分离且无法克隆的匿名函数中,因为另一个事件正在侦听节点更改...
2021-04-21 03:28:06
@yeah 旗帜是完美的!事件重复绑定bug & h5 dataset flag解决方案codepen.io/xgqfrms/full/PaRBEy
2021-05-08 03:28:06
@vsync 这不是 JavaScript 问题,而是浏览器功能以及它们如何管理 DOM。如果浏览器要处理这样的检查,它可能类似于 Ryan Warner 所说的。
2021-05-09 03:28:06
javascript 没有告诉你,这太奇怪了!我觉得这很奇怪。
2021-05-17 03:28:06

你不需要。只需按您想要的次数和次数将它贴在那里即可。MDN 解释了相同的事件侦听器

如果在同一个 EventTarget 上使用相同的参数注册了多个相同的 EventListeners,则丢弃重复的实例。它们不会导致 EventListener 被调用两次,并且不需要使用该removeEventListener 方法手动删除它们

但是请注意,当使用匿名函数作为处理程序时,此类侦听器将不相同,因为即使使用重复调用的相同不变源代码定义匿名函数也不相同,即使在循环中也是如此。

重要的是要注意@CharlesStover 提到的,上面的文章还指出:但是请注意,当使用匿名函数作为处理程序时,此类侦听器将不相同,因为即使使用相同的不变源定义匿名函数也不相同 -代码简单地重复调用,即使在循环中。这解释了我所看到的行为。
2021-04-20 03:28:06
注意:如果您在 addEventListener 中命名函数上使用 .bind() 这将不起作用
2021-05-10 03:28:06
@RonnieRoyston 请重写您的答案,以便它警告而不是鼓励,注意 Charles 和 David 的评论,因为人们可能不知道这些,并且可能不会阅读细则,从而导致低质量的代码
2021-05-13 03:28:06
这可能适用于等效的函数引用,但不是相同的函数。addEventListener(function() { alert('x'); }); addEventListener(function() { alert('x'); });会提醒x两次。
2021-05-17 03:28:06
这才是真正的答案!
2021-05-17 03:28:06