如何在Chrome Dev工具中使用getEventListeners?

Question

我试图追踪哪个函数钩入了.someclass的点击事件。我打开了Chrome开发者工具并输入了以下内容。

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

结果如下：

Object {}

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

有没有办法找到？

更新1：

按照Krasimir的建议，可能只有两个事件：mousemove或mouseover。那么我怎样才能找到处理canvas.overlay事件的确切函数？要一级级深入太多了。

- HP.

Answer 1

1. 打开开发者工具
2. 打开元素选项卡并定位到你的元素（.someclass）
3. 每个元素有四个选项卡 - 样式，属性，DOM断点和事件监听器
4. 选择事件监听器

- Krasimir

---

我添加了带有截图的更新。下钻节点太多了。我该选择哪一个来找到确切的函数？ - HP.

抱歉，如果没有看到实际页面，很难说。 - Krasimir

即使没有屏幕截图，这个答案也很棒！ - lukas.pukenis

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在他的答案中提到的“事件监听器”选项卡完全相同的内容（将“筛选器”选项设置为“所有节点”）。

- Konrad Dzwinel

---

我运行了代码，它可以工作，但是它给了我一堆事件，我不知道该选择哪一个 :( - HP.

@HP。我不明白你想找什么。如果你正在寻找click事件处理程序，那么列表上只有一个。如果你正在寻找在canvas.overlay上的mousemove事件，那么也只有一个。 - Konrad Dzwinel

抱歉如果我造成了困惑，但是我在mousemove下看到了很多函数，比如prototype: Object或者__proto__: function Empty()或者<function scope>，所以我不确定哪一个是监听器函数。 - HP.

我在使用hasOwnProperty时遇到错误，它在listeners中不是一个函数。我应该使用event.hasOwnProperty()吗？这样它就不会失败，但allListeners最终会成为空对象，因为该函数总是返回false。 - Andrew

@Andrew 跳过 hasOwnProperty 检查（我已经更新了代码）。由于某种原因，在 Chrome 中，该方法已从 getEventListeners 返回的对象中删除。 - Konrad Dzwinel

太棒了，非常感谢！这里是您的代码简化版本，用于获取节点列表及其自身事件，以便您知道它们各自来自哪里：var el = document.querySelector('.someclass'); while (el) { console.log(el, getEventListeners(el)); el = el.parentNode; } - Andrew

Answer 3

我猜你正在使用jQuery将事件绑定到那个元素。 这就是为什么你在下钻菜单中看不到实际的处理程序代码。 如果没有被jQuery包装，实际的代码应该像这样显示在"listenerBody"中：

- Sean Chen