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

Question

我想要一次添加一个监听器beforeunload.这是我的伪代码:

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

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

Answer 1

实际上,无需检查是否将侦听器添加到目标:

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

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

Answer 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").更改日志有一个警告,应该考虑到:

请注意,这不是受支持的公共接口; 实际的数据结构可能会因版本不同而发生变化.

Answer 3

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

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

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