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

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

使用以下方法附加事件:

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

当前回答

2022年更新:

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

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

2022-09-05 05:28:45

其他回答

这取决于事件是如何附加的。为了说明，假设我们有以下点击处理程序:

var handler = function() { alert('clicked!') };

我们将使用不同的方法将它附加到元素上，有些允许检查，有些不允许。

方法A)单个事件处理程序

element.onclick = handler;
// inspect
console.log(element.onclick); // "function() { alert('clicked!') }"

方法B)多个事件处理程序

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers

方法C): jQuery

$(element).click(handler);

1.3.x // inspect var clickEvents = $(element).data("events").click; jQuery.each(clickEvents, function(key, value) { console.log(value) // "function() { alert('clicked!') }" }) 1.4.x (stores the handler inside an object) // inspect var clickEvents = $(element).data("events").click; jQuery.each(clickEvents, function(key, handlerObj) { console.log(handlerObj.handler) // "function() { alert('clicked!') }" // also available: handlerObj.type, handlerObj.namespace }) 1.7+ (very nice) Made using knowledge from this comment. events = $._data(this, 'events'); for (type in events) { events[type].forEach(function (event) { console.log(event['handler']); }); }

(参见jQuery.fn.data和jQuery.data)

方法D):原型(凌乱)

$(element).observe('click', handler);

1.5.x // inspect Event.observers.each(function(item) { if(item[0] == element) { console.log(item[2]) // "function() { alert('clicked!') }" } }) 1.6 to 1.6.0.3, inclusive (got very difficult here) // inspect. "_eventId" is for < 1.6.0.3 while // "_prototypeEventID" was introduced in 1.6.0.3 var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click; clickEvents.each(function(wrapper){ console.log(wrapper.handler) // "function() { alert('clicked!') }" }) 1.6.1 (little better) // inspect var clickEvents = element.getStorage().get('prototype_event_registry').get('click'); clickEvents.each(function(wrapper){ console.log(wrapper.handler) // "function() { alert('clicked!') }" })

当单击控制台中的结果输出(其中显示了函数的文本)时，控制台将直接导航到相关JS文件中函数声明的行。

2009-01-15 15:13:51

粘贴到console中，可以在HTML元素旁边打印所有eventlistener

Array.from(document.querySelectorAll("*")).forEach(element => {
    const events = getEventListeners(element)
    if (Object.keys(events).length !== 0) {
         console.log(element, events)
    }
})

2020-07-22 14:22:29

我试图在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, Firefox, Vivaldi和Safari在他们的开发人员工具控制台中支持getEventListeners(domElement)。

对于大多数调试目的，都可以使用这种方法。

下面是一个很好的使用它的参考: getEventListeners函数

Clifford Fajardo在评论中给出了高度投票的建议:

getEventListeners($0)将获得你在Chrome开发工具中关注的元素的事件监听器。

2013-05-14 13:40:20

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

2013-11-28 16:30:26

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

推荐文章

最新文章

标签