Is there a way to find what event handlers are attached to a given DOM node?
For example, when you click the "add comment" link, there's an event handler attached to it which shows the comment form. Now, if I have a DOM document (a web page), and want to list all the event handlers for one specific node, is there a way to do this?
(I suspect that it's not possible for JS running within the page; do browser extensions in FF have access to this data?)
HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).
The property name for event handlers starts with 'on' with the event appended afterwards. Examples: onload , onclick , onfocus , onscroll .
Add an Event Handler to the window Object The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object, or other objects that support events, like the xmlHttpRequest object.
There are three ways to assign an event handler: HTML event handler attribute. HTML DOM property. HTML DOM addEventListener() method.
Chrome (and I suspect Safari) can show attached event listeners when you select an element in the DOM and then scroll down the right sidebar to the Event Listeners section. There, you can see which functions are attached.
I don't have a copy of Firebug at the moment, but I suspect the DOM tab to show similar information in Firefox as well.
In Chrome, you can use getEventListeners
.
getEventListeners($0)
An object mapping event names to their handlers should be returned. Note that $0
is a special dev tools variable which always points to the last element selected in the "Elements" tabs.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With