385

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"?

1
  • this worked for me: Object.keys(window).filter(f=> f.startsWith("on")==true && document.getElementById("Any_Element_ID_or_Referance")[f] !=undefined)
    – garish
    Commented Jul 3, 2022 at 4:08

9 Answers 9

545

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):

Console output for $._

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.

16
  • 69
    This only works for elements bound through the jQuery helpers. Commented Feb 18, 2012 at 18:02
  • 4
    @jammypeach I'm attempting your solution but still getting undefined returned for the selector. I used $('#elem').bind('click', function() {}); if that would make a difference.
    – Marcus
    Commented Oct 19, 2012 at 2:13
  • 6
    @marcus ahhh, woops I missed something, sorry :) $._data(element[0], ‘events’); Commented Oct 23, 2012 at 8:10
  • 17
    These days one must use: $._data( $('#foo')[0] ).events
    – Donald T
    Commented Apr 14, 2015 at 20:44
  • 7
    $._data() is used by JQuery internal. $.data() is the public method to user. And $.data(element, 'events') works fine.
    – Lin Du
    Commented May 11, 2017 at 3:54
88

General case:

  • Hit F12 to open Dev Tools
  • Click the Sources tab
  • On right-hand side, scroll down to Event Listener Breakpoints, and expand tree
  • Click on the events you want to listen for.
  • Interact with the target element, if they fire you will get a break point in the debugger

Similarly, you can:

  • right click on the target element -> select "Inspect element"
  • Scroll down on the right side of the dev frame, at the bottom is 'event listeners'.
  • Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)
3
  • 4
    I agree this is the preferred method and is a universal solution, versus relying on jQuery, which may or may not be available. Commented Apr 23, 2015 at 17:48
  • 4
    @dead umm... the question specifically refers to jQuery and uses jQuery in the example attachment - the answer should only be valid in the context of jQuery(?) Commented Mar 28, 2016 at 18:06
  • 6
    It's helpful to understand answers in other contexts as well. Just because someone asks a specific question doesn't mean that the constrained answer they will receive is the best one available. Especially with jQuery, people tend to rely on it as a crutch. Understanding the underlying architecture is important. This answer shows that jQuery isn't even necessarily required. The question and example is too vague to know the usage and therefore, leaves open to interpretation what could be considered a valid answer. Commented Mar 28, 2016 at 23:07
13

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);
1
  • 10
    I think that's not a native function and needs the following script/dependency: github.com/colxi/getEventListeners This should be added to the answer, as it's misleading otherwise. But thanks for getting me to that 'plugin'; looks nice. :)
    – Dennis98
    Commented Mar 18, 2019 at 14:14
12

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,

  1. Right click on the element and select 'Inspect element with Firebug'
  2. In the sidebar panels (shown in the screenshot), navigate to the events tab using the tiny > arrow
  3. The events tab shows the events and corresponding functions for each event
  4. The text next to it shows the function location

enter image description here

1
  • 2
    This is also available in IE dev tools. Commented Sep 7, 2016 at 20:00
6

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.

5

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:

  1. Right-click the element
  2. In the context menu, Click 'Inspect Element'
  3. If there is an 'ev' icon next to the element (yellow box), click on 'ev' icon
  4. Displays all events for that element and event handler

FF Quantum Dev Tools

0
5

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:

enter image description here

And then look at the handler > [[FunctionLocation]]

enter image description here

2

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.

1

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/

1
  • 3
    The reason for this is that you are delegating the event from $('#outerWrap'). The events are actually bound to that element rather than the individual anchors.
    – Scottux
    Commented May 14, 2014 at 15:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.