Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What event handlers are attached to a DOM node - how to find?

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

like image 646
Piskvor left the building Avatar asked Nov 30 '10 13:11

Piskvor left the building


People also ask

Does DOM use event handlers?

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

What are the examples of DOM event handlers?

The property name for event handlers starts with 'on' with the event appended afterwards. Examples: onload , onclick , onfocus , onscroll .

Which method registers an event handler for a DOM object?

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.

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. HTML DOM property. HTML DOM addEventListener() method.


2 Answers

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.

like image 126
Klemen Slavič Avatar answered Sep 22 '22 06:09

Klemen Slavič


In Chrome, you can use getEventListeners.

  1. Open Developer Tools
  2. Select the element you're interested in
  3. Type this the console: getEventListeners($0)
  4. Hit enter.

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.

like image 20
Xavi Avatar answered Sep 22 '22 06:09

Xavi