Can I find events bound on an element with jQuery

Question

I bind two event handlers on this link    lt a href     id  elm  gt Show Alert lt  a gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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     Right click on the element and select  Inspect element with Firebug   In the sidebar panels  shown in the screenshot   navigate to the events tab using the tiny   arrow The events tab shows the events and corresponding functions for each event The text next to it shows the function location

User · Answer

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

User · Answer

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    Right-click the element In the context menu  Click  Inspect Element  If there is an  ev  icon next to the element  yellow box   click on  ev  icon Displays all events for that element and event handler

User · Answer

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

[javascript] Can I find events bound on an element with jQuery?

Examples related to javascript

Examples related to jquery

Examples related to jquery-events