我有一个页面,其中一些事件监听器附加到输入框和选择框。是否有一种方法可以找出哪些事件侦听器正在观察特定的DOM节点以及观察什么事件?

使用以下方法附加事件:

Prototype, Event.observe; 唐,addEventListener; 元素属性元素onclick


当前回答

完全工作的解决方案基于Jan Turon的回答-行为类似于控制台的getEventListeners():

(有一个重复的小错误。反正也不怎么坏。)

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._addEventListener(a,b,c);
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(!this.eventListenerList[a])
      this.eventListenerList[a] = [];
    //this.removeEventListener(a,b,c); // TODO - handle duplicates..
    this.eventListenerList[a].push({listener:b,useCapture:c});
  };

  Element.prototype.getEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined)
      return this.eventListenerList;
    return this.eventListenerList[a];
  };
  Element.prototype.clearEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined){
      for(var x in (this.getEventListeners())) this.clearEventListeners(x);
        return;
    }
    var el = this.getEventListeners(a);
    if(el==undefined)
      return;
    for(var i = el.length - 1; i >= 0; --i) {
      var ev = el[i];
      this.removeEventListener(a, ev.listener, ev.useCapture);
    }
  };

  Element.prototype._removeEventListener = Element.prototype.removeEventListener;
  Element.prototype.removeEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._removeEventListener(a,b,c);
      if(!this.eventListenerList)
        this.eventListenerList = {};
      if(!this.eventListenerList[a])
        this.eventListenerList[a] = [];

      // Find the event in the list
      for(var i=0;i<this.eventListenerList[a].length;i++){
          if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm..
              this.eventListenerList[a].splice(i, 1);
              break;
          }
      }
    if(this.eventListenerList[a].length==0)
      delete this.eventListenerList[a];
  };
})();

用法:

someElement.getEventListeners([name]) -返回事件监听器列表,如果设置了name则返回该事件的监听器数组

someElement.clearEventListeners([name]) -删除所有事件监听器,如果设置了name,则只删除该事件的监听器

其他回答

1:原型。observe使用Element。addEventListener(参见源代码)

2:你可以覆盖元素。addEventListener用于记住添加的侦听器(方便的属性EventListenerList已从DOM3规范提案中删除)。在附加任何事件之前运行这段代码:

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    this._addEventListener(a,b,c);
    if(!this.eventListenerList) this.eventListenerList = {};
    if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
    this.eventListenerList[a].push(b);
  };
})();

通过以下方式阅读所有活动:

var clicks = someElement.eventListenerList.click;
if(clicks) clicks.forEach(function(f) {
  alert("I listen to this function: "+f.toString());
});

不要忘记重写Element。removeEventListener从自定义的Element.eventListenerList中删除事件。

3:元素。Onclick属性在这里需要特别注意:

if(someElement.onclick)
  alert("I also listen tho this: "+someElement.onclick.toString());

4:不要忘记元素。Onclick内容属性:这是两个不同的东西:

someElement.onclick = someHandler; // IDL attribute
someElement.setAttribute("onclick","otherHandler(event)"); // content attribute

所以你也需要处理它:

var click = someElement.getAttribute("onclick");
if(click) alert("I even listen to this: "+click);

Visual Event bookmarklet(在最流行的回答中提到过)只窃取自定义库处理程序缓存:

It turns out that there is no standard method provided by the W3C recommended DOM interface to find out what event listeners are attached to a particular element. While this may appear to be an oversight, there was a proposal to include a property called eventListenerList to the level 3 DOM specification, but was unfortunately been removed in later drafts. As such we are forced to looked at the individual Javascript libraries, which typically maintain a cache of attached events (so they can later be removed and perform other useful abstractions). As such, in order for Visual Event to show events, it must be able to parse the event information out of a Javascript library.

元素覆盖可能是有问题的(即,因为有一些DOM特定的特性,如活动集合,不能在JS中编码),但它提供了eventListenerList原生支持,它在Chrome, Firefox和Opera中工作(在IE7中不工作)。

有很好的jQuery事件扩展:

(主题)

2022年更新:

在Chrome开发工具的元素面板中,有一个事件监听器选项卡,在那里你可以看到元素的监听器。

你也可以取消选择“祖宗”,这样它只显示该元素的监听器

我最近在处理事件,想在一个页面中查看/控制所有事件。在研究了可能的解决方案后,我决定走自己的路,创建一个自定义系统来监视事件。所以,我做了三件事。

首先,我需要一个用于页面中所有事件监听器的容器:那就是eventlisteners对象。它有三个有用的方法:add()、remove()和get()。

接下来,我创建了一个EventListener对象来保存事件的必要信息,即:目标、类型、回调、选项、useCapture、wantsUntrusted,并添加了一个方法remove()来删除侦听器。

最后,我扩展了本机addEventListener()和removeEventListener()方法,使它们与我创建的对象(EventListener和EventListeners)一起工作。

用法:

var bodyClickEvent = document.body.addEventListener("click", function () {
    console.log("body click");
});

// bodyClickEvent.remove();

addEventListener()创建一个EventListener对象,将其添加到EventListener并返回EventListener对象,以便稍后将其删除。

EventListeners.get()可用于查看页面中的侦听器。它接受一个EventTarget或一个字符串(事件类型)。

// EventListeners.get(document.body);
// EventListeners.get("click");

Demo

假设我们想知道当前页面中的每个事件侦听器。我们可以这样做(假设您正在使用脚本管理器扩展,在本例中是Tampermonkey)。下面的脚本是这样做的:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      https://stackoverflow.com/*
// @grant        none
// ==/UserScript==

(function() {
    fetch("https://raw.githubusercontent.com/akinuri/js-lib/master/EventListener.js")
        .then(function (response) {
            return response.text();
        })
        .then(function (text) {
            eval(text);
            window.EventListeners = EventListeners;
        });
})(window);

当我们列出所有监听器时,它说有299个事件监听器。“好像”有一些复制品,但我不知道是不是真的复制品。并不是每个事件类型都是重复的,所以所有这些“重复”可能是一个单独的侦听器。

代码可以在我的存储库中找到。我不想把它贴在这里,因为它太长了。


更新:这似乎不能与jQuery工作。当我检查EventListener时,我看到回调为

function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}

我相信这属于jQuery,而不是实际的回调。jQuery将实际的回调存储在EventTarget的属性中:

$(document.body).click(function () {
    console.log("jquery click");
});

要删除事件监听器,实际的回调需要传递给removeEventListener()方法。因此,为了在jQuery中实现这一点,还需要进一步修改。我以后可能会解决这个问题。

使用getEventListeners在谷歌Chrome:

getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));