[英]Can I find events bound on an element with jQuery?
I bind two event handlers on this link:我在此链接上绑定了两个事件处理程序:
<a href='#' id='elm'>Show Alert</a>
JavaScript: JavaScript:
$(function()
{
$('#elm').click(_f);
$('#elm').mouseover(_m);
});
function _f(){alert('clicked');}
function _m(){alert('mouse over');}
Is there any way to get a list of all events bound on an element, in this case on element with id="elm"
?有什么方法可以获取绑定在一个元素上的所有事件的列表,在这种情况下是在id="elm"
元素上?
In modern versions of jQuery, you would use the $._data
method to find any events attached by jQuery to the element in question.在现代版本的 jQuery 中,您将使用$._data
方法来查找由 jQuery 附加到相关元素的任何事件。 Note , this is an internal-use only method:请注意,这是一种仅供内部使用的方法:
// 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" );
The result from $._data
will be an object that contains both of the events we set (pictured below with the mouseout
property expanded): $._data
的结果将是一个包含我们设置的两个事件的对象(如下图所示, mouseout
属性已展开):
Then in Chrome, you may right click the handler function and click "view function definition" to show you the exact spot where it is defined in your code.然后在 Chrome 中,您可以右键单击处理程序函数并单击“查看函数定义”以显示它在代码中定义的确切位置。
General case:一般情况:
Sources
tab单击Sources
选项卡Event Listener Breakpoints
, and expand tree在右侧,向下滚动到Event Listener Breakpoints
,然后展开树Similarly, you can:同样,您可以:
Inspect element
"右键单击目标元素-> 选择“ Inspect element
”event listeners
'.在开发框架的右侧向下滚动,底部是“ event listeners
”。I'm adding this for posterity;我为后代添加这个; There's an easier way that doesn't involve writing more JS.有一种更简单的方法,不需要编写更多的 JS。 Using the amazing firebug addon for firefox ,使用Firefox 惊人的 firebug 插件,
You can now simply get a list of event listeners bound to an object by using the javascript function getEventListeners().现在,您可以使用 javascript 函数 getEventListeners() 简单地获取绑定到对象的事件侦听器列表。
For example type the following in the dev tools console:例如,在开发工具控制台中键入以下内容:
// Get all event listners bound to the document object
getEventListeners(document);
The jQuery Audit plugin plugin should let you do this through the normal Chrome Dev Tools. jQuery Audit 插件插件应该让你通过普通的 Chrome 开发工具来做到这一点。 It's not perfect, but it should let you see the actual handler bound to the element/event and not just the generic jQuery handler.它并不完美,但它应该让您看到绑定到元素/事件的实际处理程序,而不仅仅是通用的 jQuery 处理程序。
Note that events may be attached to the document itself rather than the element in question.请注意,事件可能会附加到文档本身而不是相关元素。 In that case, you'll want to use:在这种情况下,您需要使用:
$._data( $(document)[0], "events" );
And find the event with the correct selector :并使用正确的选择器找到事件:
And then look at the handler > [[FunctionLocation]]然后看处理程序> [[FunctionLocation]]
While this isn't exactly specific to jQuery selectors/objects, in FireFox Quantum 58.x, you can find event handlers on an element using the Dev tools:虽然这并不完全特定于 jQuery 选择器/对象,但在 FireFox Quantum 58.x 中,您可以使用开发工具在元素上找到事件处理程序:
I used something like this if($._data($("a.wine-item-link")[0]).events == null) { ... do something, pretty much bind their event handlers again } to check if my element is bound to any event.我使用了这样的东西 if($._data($("a.wine-item-link")[0]).events == null) { ... 做一些事情,几乎再次绑定他们的事件处理程序 } 来检查如果我的元素绑定到任何事件。 It will still say undefined (null) if you have unattached all your event handlers from that element.如果您已从该元素取消附加所有事件处理程序,它仍会显示未定义 (null)。 That is the reason why I am evaluating this in an if expression.这就是我在 if 表达式中评估它的原因。
When I pass a little complex DOM query to $._data like this: $._data($('#outerWrap .innerWrap ul li:last a'), 'events')
it throws undefined in the browser console.当我像这样将一个复杂的 DOM 查询传递给 $._data 时: $._data($('#outerWrap .innerWrap ul li:last a'), 'events')
它在浏览器控制台中抛出 undefined 。
So I had to use $._data on the parent div: $._data($('#outerWrap')[0], 'events')
to see the events for the a tags.所以我不得不在父 div 上使用 $._data: $._data($('#outerWrap')[0], 'events')
来查看 a 标签的事件。 Here is a JSFiddle for the same: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/这是相同的 JSFiddle: http : //jsfiddle.net/giri_jeedigunta/MLcpT/4/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.