我有一个页面，其中一些事件监听器附加到输入框和选择框。是否有一种方法可以找出哪些事件侦听器正在观察特定的DOM节点以及观察什么事件?
使用以下方法附加事件:
Prototype, Event.observe; 唐,addEventListener; 元素属性元素onclick
当前回答
你可以通过把这个放在<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
其他回答
你可以通过把这个放在<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
粘贴到console中，可以在HTML元素旁边打印所有eventlistener
Array.from(document.querySelectorAll("*")).forEach(element => {
const events = getEventListeners(element)
if (Object.keys(events).length !== 0) {
console.log(element, events)
}
})
(重写这个问题的答案，因为它与这里有关。)
在调试时，如果你只想看到事件，我建议你选择…
视觉事件 Chrome开发者工具的元素部分:选择一个元素，在右下角寻找“事件监听器”(类似于Firefox)
如果你想在你的代码中使用事件，并且你在1.8版本之前使用jQuery，你可以使用:
$(selector).data("events")
来获取事件。从1.8版开始，停止使用.data("events")(请参阅此错误票据)。你可以使用:
$._data(element, "events")
另一个例子:将某个链接上的所有点击事件写入控制台:
var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);
(工作示例见http://jsfiddle.net/HmsQC/)
不幸的是，使用$。_data除了调试之外不建议使用，因为它是jQuery的内部结构，在未来的版本中可能会改变。不幸的是，我不知道其他方便的方法来访问这些事件。
2022年更新:
在Chrome开发工具的元素面板中，有一个事件监听器选项卡，在那里你可以看到元素的监听器。
你也可以取消选择“祖宗”，这样它只显示该元素的监听器
如果你有Firebug，你可以使用控制台。在任何JavaScript标量、数组或对象的控制台日志中打印一个漂亮的树。
试一试:
console.dir(clickEvents);
or
console.dir(window);
