Using Chrome how to find to which events are bound to an element

Question

Lets suppose I ve a link on my page    lt a href     id  foo  gt Click Here lt  a gt    I don t know anything else  but when I click on the link  an alert  bar   is displayed  So I know that somewhere  some code is getting bound to  foo   How can I find the code that is binding the alert  bar   to the click event  I m looking for a solution with Chrome   Ps   The example is fictive  so I m not looking for solution like   Use XXXXXX and search the whole project for  alert   bar      I want a real debugging tracing solution

User · Answer

2018 Update - Might be helpful for future readers   I am not sure when this was originally introduced in Chrome  But another  easy  way this can be done now in Chrome is via console commands   For example   in chrome console type   getEventListeners  0    Whereas  0 is the selected element in the DOM   https   developers google com web tools chrome-devtools console command-line-reference 0 - 4

User · Answer

Edit  in lieu of my own answer  this one is quite excellent  How to debug JavaScript jQuery event bindings with Firebug  or similar tool   Google Chromes developer tools has a search function built into the scripts section  If you are unfamiliar with this tool   just in case    right click anywhere on a page  in chrome  click  Inspect Element  click the  Scripts  tab Search bar in the top right   Doing a quick search for the  ID should take you to the binding function eventually   Ex  searching for  foo would take you to       foo   click function    alert  bar

User · Answer

Latest as of 2020  For version Chrome Version 83 0 4103 61       Select the element you want to inspect Choose the Event Listeners tab Make sure to check the Framework listeners to show the real javascript file instead of the jquery function

User · Answer

For Chrome Version 52 0 2743 116    In Chrome s Developer Tools  bring up the  Search  panel by hitting Ctrl Shift F   Type in the name of the element you re trying to find    Results for binded elements should appear in the panel and state the file they re located in

User · Answer

Using Chrome 15 0 865 0 dev  There s an  Event Listeners  section on the Elements panel     And an  Event Listeners Breakpoints  on the Scripts panel  Use a Mouse -  click breakpoint and then  step into next function call  while keeping an eye on the call stack to see what userland function handles the event  Ideally  you d replace the minified version of jQuery with an unminified one so that you don t have to step in all the time  and use step over when possible

User · Answer

findEventHandlers is a jquery plugin  the raw code is here  https   raw githubusercontent com ruidfigueiredo findHandlersJS master findEventHandlers js  Steps   Paste the raw code directely into chrome s console note must have jquery loaded already  Use the following function call   findEventHandlers eventType  selector   to find the corresponding s selector specified element s eventType handler    Example   findEventHandlers  click     clickThis      Then if any  the available event handler will show bellow  you need to expand to find the handler  right click the function and select show function definition  See  https   blinkingcaret wordpress com 2014 01 17 quickly-finding-and-debugging-jquery-event-handlers

User · Answer

You can also use Chrome s inspector to find attached events another way  as follows     Right click on the element to inspect  or find it in the  Elements  pane  Then in the  Event Listeners  tab pane  expand the event  eg  click   Expand the various sub-nodes to find the one you want  and then look for where the  handler  sub-node is  Right click the word  function   and then click  Show function definition    This will take you to where the handler was defined  as demonstrated in the following image  and explained by Paul Irish here  https   groups google com forum   topic google-chrome-developer-tools NTcIS15uigA

User · Answer

Give it a try to the jQuery Audit  extension  https   chrome google com webstore detail jquery-audit dhhnpbajdcgdmbbcoakfhmfgmemlncjg   after installing follow these steps    Inspect the element On the new  jQuery Audit  tab expand the Events property Choose for the Event you need  From the handler property  right click over function and select  Show function definition  You will now see the Event binding code Click on the  Pretty print  button for a more readable view of the code

[javascript] Using Chrome, how to find to which events are bound to an element

Examples related to javascript

Examples related to google-chrome

Examples related to debugging

Examples related to dom-events

Examples related to inspector