Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inspect attached event handlers for any DOM element

Is there any way to view what functions / code are attached to any event for a DOM element? Using Firebug or any other tool.

like image 575
Claudio Redi Avatar asked Apr 12 '10 15:04

Claudio Redi


People also ask

How do you find attached event listeners?

Right-click on the search icon button and choose “inspect” to open the Chrome developer tools. Once the dev tools are open, switch to the “Event Listeners” tab and you will see all the event listeners bound to the element. You can expand any event listener by clicking the right-pointing arrowhead.

Which method registers an event handler for a DOM object?

The addEventListener method is used to register such a handler. Each event has a type ( "keydown" , "focus" , and so on) that identifies it. Most events are called on a specific DOM element and then propagate to that element's ancestors, allowing handlers associated with those elements to handle them.

How many ways can you attach an event handler to a DOM element?

There are three ways to assign an event handler: HTML event handler attribute, element's event handler property, and addEventListener() .

Does DOM use event handlers?

DOM elements can have functions hook onto events. The functions are called event handlers and the DOM element is known as an event target. The example code block shows how to register a function as an event handler.


1 Answers

The Elements Panel in Google Chrome Developer tools has had this since Chrome releases in mid 2011 and Chrome developer channel releases since 2010.

Also, the event listeners shown for the selected node are in the order in which they are fired through the capturing and bubbling phases.

Hit command + option + i on Mac OSX and Ctrl + Shift + i on Windows to fire this up in Chrome

dev tools screenshot

like image 111
tuxtitlan Avatar answered Sep 16 '22 14:09

tuxtitlan