I still can't belive this is not possible but is there a way to loop through the dom and see all event handlers attached using 'addEventListener'. This post and many others says no.
If that's the case then how do apps like Chrome's inspector or Firebug show them, which they do? I guess they probably augment the dom's methods in some way so they can track what's being bound.
Add an Event Handler to the window ObjectThe 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.
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.
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.
Console of Chrome has a method that can help you check if a dom node has any event listeners registered, for example to check event listeners attached to the document node use:
https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject
getEventListeners(document);
You could recursively iterate over all dom nodes and find all event handlers attached if needed.
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