我在这个链接上绑定了两个事件处理程序:
Show Alert
JavaScript的:
$(function() { $('#elm').click(_f); $('#elm').mouseover(_m); }); function _f(){alert('clicked');} function _m(){alert('mouse over');}
有没有办法得到一个元素绑定的所有事件的列表,在这种情况下元素与id="elm"
?
在现代版本的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中,您可以右键单击处理程序函数并单击"查看函数定义"以显示代码中定义它的确切位置.
一般情况:
点击F12打开Dev Tools
单击Sources
选项卡
在右侧,向下滚动Event Listener Breakpoints
并展开树
单击要收听的事件.
与目标元素交互,如果它们触发,您将在调试器中获得一个断点
同样,您可以:
右键单击目标元素 - >选择" Inspect element
"
向下滚动到开发框架的右侧,底部是' event listeners
'.
展开树以查看附加到元素的事件.不确定这是否适用于通过冒泡处理的事件(我猜不是)
我正在为后代添加这个; 有一种更简单的方法,不涉及编写更多的JS.使用惊人的firebug插件for firefox,
右键单击元素并选择"使用Firebug检查元素"
在侧边栏面板中(如屏幕截图所示),使用tiny>箭头导航到events选项卡
"事件"选项卡显示每个事件的事件和相应的功能
它旁边的文字显示了功能位置
现在,您可以使用javascript函数getEventListeners()简单地获取绑定到对象的事件侦听器列表.
例如,在开发工具控制台中键入以下内容:
// Get all event listners bound to the document object getEventListeners(document);
在jQuery的审计插件插件应该让你通过正常的Chrome浏览器开发工具做到这一点.它并不完美,但它应该让你看到绑定到元素/事件的实际处理程序,而不仅仅是通用的jQuery处理程序.