javascript 如何在 Chrome Dev Tool 中使用 getEventListeners？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18544306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use getEventListeners in Chrome Dev Tool?
提问by HP.
I tried to trace back which function hooked into a click event of .someclass. I open Chrome Dev Tool and type this
我试图追溯哪个函数与.someclass. 我打开 Chrome Dev Tool 并输入这个
getEventListeners(document.querySelector('.someclass'));
getEventListeners(document.querySelector('.someclass'));
The result is this
结果是这样
Object {}
Object {}
I cannot click and open it to find out the name of the object or the source code that handle click event.
我无法单击并打开它以找出对象的名称或处理单击事件的源代码。
Is there a way to find out?
有没有办法查到？
UPDATE 1:
更新 1：
Followed Krasimir'sadvise below. There could be only two events: mousemoveor mouseover. So how do I find out the exact function handling that event for canvas.overlay? There are just too many to drill down into.
遵循以下Krasimir 的建议。可能只有两个事件：mousemove或mouseover。那么我如何找出处理该事件的确切函数canvas.overlay呢？有太多需要深入研究。
回答by Krasimir
- Open the DevTools
- Open the Elements tab and locate your element (.someclass)
- There are four tabs per element - Styles, Properties, DOM Breakpoints and Event Listeners
- Select Event Listeners
- 打开开发者工具
- 打开 Elements 选项卡并找到您的元素 (.someclass)
- 每个元素有四个选项卡 - 样式、属性、DOM 断点和事件侦听器
- 选择事件监听器
回答by Konrad Dzwinel
You are getting an empty object when calling
调用时你得到一个空对象
getEventListeners(document.querySelector('.someclass'));
probably because the listener isn't hooked up to .someclasselement itself (direct event), but to one of it's ancestors (delegated event). There is a good explanation of this here.
可能是因为侦听器没有连接到.someclass元素本身（直接事件），而是连接到它的祖先之一（委托事件）。有一个很好的解释在这里。
You can list both delegated and direct events by calling getEventListenersfor specified node andall it's ancestors. This function should do the trick:
您可以通过调用getEventListeners指定节点及其所有祖先来列出委托事件和直接事件。这个函数应该可以解决问题：
getAllEventListeners = function(el) {
var allListeners = {}, listeners;
while(el) {
listeners = getEventListeners(el);
for(event in listeners) {
allListeners[event] = allListeners[event] || [];
allListeners[event].push({listener: listeners[event], element: el});
}
el = el.parentNode;
}
return allListeners;
}
However, this will output exactly the same thing as the "Event Listeners" tab (with "Filter" option set to "All nodes") that Krasimir mentioned in his answer.
但是，这将输出与 Krasimir 在他的回答中提到的“事件侦听器”选项卡（“过滤器”选项设置为“所有节点”）完全相同的内容。
回答by Sean Chen
I guess you are using jQuery to bind the events to that element. That's why you can't see the actual handler code in the drill down menu. Without wrapped by jQuery, the actual code should be displayed in "listenerBody" like this:
我猜您正在使用 jQuery 将事件绑定到该元素。这就是为什么您无法在向下钻取菜单中看到实际处理程序代码的原因。如果没有被 jQuery 包裹，实际的代码应该像这样显示在“listenerBody”中：
