如何在JavaScript或调试中找到DOM节点上的事件侦听器?

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

使用以下方法附加事件:

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

当前回答

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

首先，我需要一个用于页面中所有事件监听器的容器:那就是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中实现这一点，还需要进一步修改。我以后可能会解决这个问题。

2018-06-28 09:21:07

其他回答

你可以通过把这个放在<head>的顶部来包装本地DOM方法来管理事件监听器:

<script>
    (function(w){
        var originalAdd = w.addEventListener;
        w.addEventListener = function(){
            // add your own stuff here to debug
            return originalAdd.apply(this, arguments);
        };

        var originalRemove = w.removeEventListener;
        w.removeEventListener = function(){
            // add your own stuff here to debug
            return originalRemove.apply(this, arguments);
        };
    })(window);
</script>

H / T @les2

2015-11-06 17:49:11

我试图在jQuery 2.1中做到这一点，并使用“$().click() -> $(element).data(“events”).click;”方法它不起作用。

我意识到只有$._data()函数在我的情况下工作:

$(document).ready(function(){ var node = $('body'); // Bind 3 events to body click node.click(function(e) { alert('hello'); }) .click(function(e) { alert('bye'); }) .click(fun_1); // Inspect the events of body var events = $._data(node[0], "events").click; var ev1 = events[0].handler // -> function(e) { alert('hello') var ev2 = events[1].handler // -> function(e) { alert('bye') var ev3 = events[2].handler // -> function fun_1() $('body') .append('<p> Event1 = ' + eval(ev1).toString() + '</p>') .append('<p> Event2 = ' + eval(ev2).toString() + '</p>') .append('<p> Event3 = ' + eval(ev3).toString() + '</p>'); }); function fun_1() { var txt = 'text del missatge'; alert(txt); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> </body>

2015-05-19 08:33:11

Chrome或Safari浏览器中的WebKit Inspector现在可以做到这一点。当您在Elements窗格中选择某个DOM元素时，它将显示该DOM元素的事件侦听器。

2011-01-17 07:39:55

完全工作的解决方案基于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，则只删除该事件的监听器

2015-06-27 10:47:52

如果你有Firebug，你可以使用控制台。在任何JavaScript标量、数组或对象的控制台日志中打印一个漂亮的树。

试一试:

console.dir(clickEvents);

console.dir(window);

2010-01-07 22:52:00

如何在JavaScript或调试中找到DOM节点上的事件侦听器?

推荐文章

最新文章

标签