如何在Chrome Dev Tool中使用getEventListeners？

Question

我试图追溯哪个函数挂钩到.someclass的点击事件。我打开Chrome开发工具并输入此

getEventListeners(document.querySelector('.someclass'));

结果就是这个

Object {}

我无法点击并打开它以找出对象的名称或处理点击事件的源代码。

有没有办法找出来？

更新1：

关注 Krasimir的建议如下。可能只有两个事件：mousemove或mouseover。那么如何找到canvas.overlay事件的确切函数处理？有很多东西可以深入研究。

Answer 1

1. 打开DevTools
2. 打开“元素”标签并找到您的元素（.someclass）
3. 每个元素有四个选项卡 - 样式，属性，DOM断点和事件监听器
4. 选择事件监听器

Answer 2

调用

时，您将获得一个空对象

getEventListeners(document.querySelector('.someclass'));

可能是因为侦听器没有连接到.someclass元素本身（直接事件），而是连接到其中一个祖先（委托事件）。对此here有一个很好的解释。

您可以通过为指定节点调用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;
}

但是，这将输出与“事件监听器”选项卡完全相同的内容（“过滤器”选项设置为“所有节点”），Krasimir在答案中提到了这一点。

Answer 3

我猜你使用jQuery将事件绑定到该元素。 这就是为什么您无法在下钻菜单中看到实际处理程序代码的原因。 如果没有jQuery包装，实际的代码应该显示在＆＃34; listenerBody＆＃34;像这样：