我可以用jQuery找到元素上的事件绑定吗?

我在这个链接上绑定了两个事件处理程序:

<a href='#' id='elm'>Show Alert</a>

JavaScript:

$(function()
{
$('#elm').click(_f);
$('#elm').mouseover(_m);
});


function _f(){alert('clicked');}
function _m(){alert('mouse over');}

是否有任何方法获得绑定在元素上的所有事件的列表，在这种情况下，元素与id="elm"?

234577 次浏览
小开
最佳答案

在现代版本的jQuery中，您可以使用$._data方法来查找由jQuery附加到相关元素的任何事件。请注意，这是一个只在内部使用的方法:

// Bind up a couple of event handlers
$("#foo").on({
click: function(){ alert("Hello") },
mouseout: function(){ alert("World") }
});


// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

$._data的结果将是一个包含我们设置的两个事件的对象(下图中展开了mouseout属性):

控制台输出$._

然后在Chrome中，你可以右键单击处理函数，然后单击“查看函数定义”来显示它在代码中定义的确切位置。

小开

当我传递一个复杂的DOM查询到$。$._data($('#outerWrap .innerWrap ul li:last a'), 'events')会在浏览器控制台中抛出undefined。

所以我必须使用$。$._data($('#outerWrap')[0], 'events')来查看a标签的事件。这里有一个相同的JSFiddle: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/

小开

jQuery审计插件插件应该让你通过正常的Chrome开发工具做到这一点。它并不完美，但它应该让您看到绑定到元素/事件的实际处理程序，而不仅仅是通用的jQuery处理程序。

小开

我使用了类似这样的if($._data($("a.wine-item-link")[0])。事件== null){…做点什么，基本上是再次绑定它们的事件处理程序来检查我的元素是否绑定到任何事件。如果你已经从该元素中解除了所有事件处理程序，它仍然会说未定义(null)。这就是为什么我在if表达式中求值的原因。

小开

一般情况下:

  • 点击F12打开开发工具
  • 单击Sources选项卡
  • 在右边，向下滚动到Event Listener Breakpoints，并展开树
  • 单击要监听的事件。
  • 与目标元素交互，如果它们触发，您将在调试器中获得断点

同样，你可以:

  • 右键点击目标元素 ->选择“Inspect element”
  • 向下滚动到开发框架的右侧，底部是'event listeners'。
  • 展开树，查看元素附加了哪些事件。不确定这是否适用于通过冒泡处理的事件(我猜不是)
小开

我加上这个是为了子孙后代;有一种更简单的方法，不需要编写更多的JS。使用神奇的firebug插件firefox，

  1. 右键点击元素，选择“Inspect element with Firebug”
  2. 在侧边栏面板(如截图所示)中，使用小>箭头导航到事件选项卡
  3. 事件选项卡显示每个事件的事件和相应的函数
  4. 旁边的文字显示了函数的位置

enter image description here

小开

虽然这并不完全针对jQuery的选择器/对象，但在FireFox Quantum 58中。x，你可以使用Dev工具在元素上找到事件处理程序:

  1. 右键单击元素
  2. 在上下文菜单中，点击“Inspect Element”
  3. 如果元素(黄色框)旁边有一个“ev”图标，点击“ev”图标
  4. 显示该元素和事件处理程序的所有事件

FF Quantum Dev Tools

小开

请注意，事件可以附加到文档本身，而不是相关的元素。在这种情况下，你会想使用:

$._data( $(document)[0], "events" );

并找到具有正确选择器的事件:

enter image description here

然后看处理程序 > [[FunctionLocation]]

enter image description here

小开

现在，通过使用javascript函数getEventListeners()，您可以简单地获得绑定到对象的事件侦听器列表。

例如，在dev tools控制台中输入以下内容:

// Get all event listners bound to the document object
getEventListeners(document);

提交答案