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:
$(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"
?
In modern versions of jQuery, you would use the $._data
method to find any events attached by jQuery to the element in question. 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):
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.
General case:
Sources
tab Event Listener Breakpoints
, and expand tree Similarly, you can:
Inspect element
" event listeners
'. 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,