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

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

使用以下方法附加事件:

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

当前回答

使用getEventListeners在谷歌Chrome:

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

2014-03-19 09:30:04

其他回答

我试图在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

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中不工作)。

2014-04-03 15:08:07

Opera 12(不是最新的基于Chrome Webkit的引擎)蜻蜓已经有一段时间了，并且很明显地显示在DOM结构中。在我看来，这是一个优秀的调试器，也是我仍然使用基于Opera 12的版本的唯一原因(没有v13, v14版本，基于v15 Webkit的版本仍然缺乏Dragonfly)

2013-11-28 16:30:26

你可以通过把这个放在<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

使用getEventListeners在谷歌Chrome:

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

2014-03-19 09:30:04

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

推荐文章

最新文章

标签