Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to find event listeners on a DOM node in JavaScript or in debugging?

I have a page where some event listeners are attached to input boxes and select boxes. Is there a way to find out which event listeners are observing a particular DOM node and for what event?

Events are attached using:

  1. Prototype's Event.observe;
  2. DOM's addEventListener;
  3. As element attribute element.onclick.
like image 627
Navneet Avatar asked Jan 15 '09 14:01

Navneet


People also ask

Where are event listeners stored JavaScript?

Its stored in the actual list (array) of Event listeners for body . Elements have a list of function references in them for their event listeners. These references are not in the DOM. When firing an event, the browser has to run thru all the appropriate elements looking for these references and running them in order.

How do I check if an event listener exists?

To check whether dynamically attached event listener exists or not with JavaScript, we can get and set the element's listener attribute. export const attachEvent = ( element: Element, eventName: string, callback: () => void ) => { if (element && eventName && element. getAttribute("listener") !== "true") { element.


1 Answers

If you just need to inspect what's happening on a page, you might try the Visual Event bookmarklet.

Update: Visual Event 2 available.

like image 93
Andrew Hedges Avatar answered Oct 06 '22 14:10

Andrew Hedges