如何在Chrome Dev Tool中使用getEventListeners？

Question

我试图追溯哪个函数挂钩到click事件中.someclass.我打开Chrome Dev Tool并输入

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

结果就是这样

Object {}

我无法单击并打开它以查找对象的名称或处理单击事件的源代码.

有没有办法找出来？

更新1:

跟随Krasimir的建议如下.可能只有两个事件:mousemove或mouseover.那么我该如何找到处理该事件的确切函数canvas.overlay呢？有太多可以深入研究.

Answer 1

1. 打开DevTools
2. 打开Elements选项卡并找到您的元素(.someclass)
3. 每个元素有四个选项卡 - 样式,属性,DOM断点和事件监听器
4. 选择事件监听器

Answer 2

调用时你得到一个空对象

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

可能是因为侦听器没有连接到.someclass元素本身(直接事件),而是连接到其中一个祖先(委托事件).有一个很好的解释在这里.

您可以通过调用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在答案中提到了这一点.