检查元素上是否有事件监听器。没有 jQuery [重复]答案

【问题标题】：Check if an element has event listener on it. No jQuery [duplicate]检查元素上是否有事件监听器。没有 jQuery [重复]
【发布时间】：2015-01-20 22:57:26
【问题描述】：

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

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

【问题讨论】：

你可以先删除再添加
添加监听器和附加属性，如data-listener = true，然后检查是否设置了data-litener，如果没有则只添加监听器不是更容易吗？
您也可以使用直接赋值来绑定一个事件处理程序，例如：formFieldInput[a].onclick=function(){...};当您更换它们时，旧的就会消失而没有复杂性......
@pawel 谢谢。有用。我在上面添加了一个附加属性。 formFieldInput[a].setAttribute("事件",true);我现在要做的是检查 hasAttribute("events") 是否进行检查：D
不确定这是否是一个好习惯，但我通过删除事件函数开头的所有兄弟事件（在我的情况下）解决了我的重复事件问题。我使用了 off() jQuery 函数api.jquery.com/off

标签： javascript

【解决方案1】：

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

getEventListeners(document.querySelector('your-element-selector'));

注意：此解决方案仅适用于 Chrome 开发者工具。

【讨论】：

这个解决方案是跨浏览器还是只是 chrome？？
@Anthony 正如我上面提到的，它只适用于 Chrome 开发工具
这对我很有效。谢谢！
请修正此答案中的语法。我批准了一个编辑。然后发帖人修改了我的一个更改并拒绝了另一个语法修复。 “这些日子”在语法上不正确。在发布者修改了他们的答案后，我尝试再次修复更改，但我的第二次编辑被拒绝，即使它的内容与我在原始编辑中批准的内容相同。
jQuery 中的快捷方式：getEventListeners($('your-element-selector')[0]);还将列出包含开发工具中元素事件的数组。

【解决方案2】：

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

可能重复：How to check whether dynamically attached event listener exists or not?

【讨论】：

这太奇怪了，javascript 没有告诉你！我觉得这很奇怪。
@vsync 这不是 JavaScript 问题，而是浏览器功能以及它们如何管理 DOM。如果浏览器要处理这样的检查，它可能类似于 Ryan Warner 所说的。
@SebastienDaniel - 是的，这就是我的意思，DOM ..
简单高效，感谢我被无法分离的匿名函数所困扰，并且无法克隆，因为另一个事件正在监听节点更改...
@yeah flag 是完美的！事件复制绑定bug&h5数据集标志解决方案codepen.io/xgqfrms/full/PaRBEy

【解决方案3】：

你不需要。只要你想打多少次就打多少次。 MDN explains identical event listeners:

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

但是请注意，当使用匿名函数作为处理程序时，这样的监听器将不相同，因为匿名函数即使使用相同不变的源代码定义也不相同，即使重复调用，甚至如果在一个循环中。

【讨论】：

这可能适用于等效函数references，但并非完全相同的函数。 addEventListener(function() { alert('x'); }); addEventListener(function() { alert('x'); }); 将提醒x 两次。
这才是真正的答案！
重要的是要注意@CharlesStover 提到的，上面的文章还指出：注意，但是当使用匿名函数作为处理程序时，这样的侦听器将不相同，因为即使匿名函数也不相同如果使用相同不变的源代码定义，则只需重复调用，即使在循环中也是如此。这解释了我所看到的行为。
注意：如果您在 addEventListener 中的 named 函数上使用 .bind()，这将不起作用
@RonnieRoyston 请改写你的答案，以便它警告而不是鼓励，注意查尔斯和大卫的 cmets，因为人们可能不知道这些，并且可能不会阅读细则，导致代码质量低下