JavaScript - 如何检查是否已添加事件答案

【问题标题】：JavaScript - how to check if event already addedJavaScript - 如何检查是否已添加事件
【发布时间】：2012-07-11 10:28:26
【问题描述】：

我想为beforeunload 添加一个监听器。这是我的伪代码：

if(window.hasEventListener('beforeunload') === false) {
     window.addEventListener('beforeunload', function() { ... }, false);
}

但是hasEventListener显然不存在。我怎样才能做到这一点？谢谢。

【问题讨论】：

标签： javascript event-listener

【解决方案1】：

事实上，不需要检查监听器是否被添加到目标：

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

来源：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Multiple_identical_event_listeners

【讨论】：

不幸的是，这不是真的。至少不是 chrome。
确实，如果你真的使用完全相同的监听器，而不仅仅是一个文本相同的监听器：jsfiddle.net/myxqu27d
@MikeLee 监听函数必须是之前添加的监听器的引用，否则会执行两次以上
@MikeLee 更新小提琴显示事件侦听器不会被调用两次 jsfiddle.net/mbd5s1ko/39
@MikeLee Lee 确实，在多个事件侦听器的情况下，最新的侦听器会覆盖前一个侦听器。但是为此，您必须定义一个命名回调函数而不是匿名回调函数。因为事件侦听器认为这两个匿名回调函数是不同的，并保持连接。看到这个jsfiddle.net/hr5d3zuw

【解决方案2】：

使用 jquery，您可以在任何对象（此处为窗口）上使用 data("events")：

var hasbeforeunload = $(window).data("events") && $(window).data("events").['beforeunload'];

但这仅适用于 jquery 添加的事件。

在更一般的情况下，您应该简单地将添加侦听器的信息存储在某处：

   var addedListeners = {};
   function addWindowListenerIfNone(eventType, fun) {
      if (addedListeners[eventType]) return;
      addedListeners[eventType] = fun;
      window.addEventListener(eventType, fun);
   }

我认为 javascript 中没有获取现有事件处理程序的标准方法。充其量你可以附加 Node 的 addEventListener 函数来拦截和存储监听器，但我不推荐它......

编辑：

从 jQuery 1.8 开始，事件数据在 $._data(element, "events") 中可用。更改日志中有一条警告，应予以考虑：

请注意，这不是受支持的公共接口；实际数据结构可能因版本而异。

【讨论】：

+1 用于纯 JavaScript，但你可以让它跨浏览器（attachEvent）。
也许吧。这将完成as explained by the MDN
感谢您尝试使用 jQuery，但我需要原生 Javascript，抱歉没有提及。然而，我会选择你的旗帜尝试。我会等待进一步的答案，如果没有更好的答案，我会选择你的。
我很确定没有本地方法可以找到添加了哪些事件侦听器。如果你愿意，我可以展示如何对Node.addEventListener 收取附加费，但如果你可以避免使用它，它会更清洁。
这似乎在较新的 jQuery 版本（大约 1.8）中停止工作......知道为什么吗？ jsfiddle.net/YEGbM/1

【解决方案3】：

在 Chrome Dev tool 中，您可以检查附加到元素的所有事件（用于调试）-

// print all events attached to document
var eventObjectAttachedToDocument = getEventListeners(document);

for (var event in eventObjectAttachedToDocument) {
    console.log(event);
}

【讨论】：

创建 2 次点击监听器，您的代码只会显示 1 次点击。
这只是 chrome 和 chrome 并打开了 devtools