14

我试图追溯哪个函数与.someclass. 我打开 Chrome 开发工具并输入这个

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

结果是这样的

Object {}

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

有没有办法找出来？

更新 1：

遵循以下Krasimir 的建议。可能只有两个事件：mousemove或mouseover。那么如何找出处理该事件的确切函数canvas.overlay呢？有太多需要深入研究。

在此处输入图像描述

4

3 回答 3

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

在此处输入图像描述

于 2013-08-31T12:00:29.047 回答
12

调用时得到一个空对象

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

于 2013-09-03T12:38:36.287 回答
1

我猜您正在使用 jQuery 将事件绑定到该元素。这就是为什么您在向下钻取菜单中看不到实际的处理程序代码的原因。如果不使用 jQuery 包装，实际代码应该显示在“listenerBody”中，如下所示：

在此处输入图像描述

于 2014-05-30T03:18:21.057 回答