I bind two event handlers on this link:
<a href='#' id='elm'>Show Alert</a>
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"
?
This question is related to
javascript
jquery
jquery-events
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:
General case:
Sources
tabEvent Listener Breakpoints
, and expand treeSimilarly, you can:
Inspect element
"event listeners
'.The jQuery Audit plugin plugin should let you do this through the normal Chrome Dev Tools. 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.
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.
So I had to use $._data on the parent div: $._data($('#outerWrap')[0], 'events')
to see the events for the a tags. Here is a JSFiddle for the same: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/
I'm adding this for posterity; There's an easier way that doesn't involve writing more JS. Using the amazing firebug addon for firefox,
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. It will still say undefined (null) if you have unattached all your event handlers from that element. That is the reason why I am evaluating this in an if expression.
You can now simply get a list of event listeners bound to an object by using the javascript function getEventListeners().
For example type the following in the dev tools console:
// Get all event listners bound to the document object
getEventListeners(document);
Source: Stackoverflow.com