0

I have a question on how we can possibly figure out which elements, among existing ones on the DOM, have an attached function through 'EventListener'. I know that it is not easy at all and I know that I can check it using Visual Event. But, I would like to know how Browsers or even more interesting, how Visual Event can detect that?

Let's say we are going to load a webpage and extract all the clickable elements from the DOM. How possibly we can determine that some of the existing elements won't change the status of the DOM?

For example, if we don't know anything about the elements, we would need to try to click even on P tags since there might be some functions attached to those. But, if we can determine whether or not this particular element will do anything after clicking on that, then we would be able to ignore it if it is not going to do anything.

Is there any straight way by which we can do something which Visual Event is doing?

Suo6613
  • 431
  • 5
  • 17
  • Your question seems to be: "how can we find all elements with attached event-listeners?" followed by: "having found those elements, how can we know whether or not they manipulate the DOM?" I don't think there's going to be a satisfactory answer to either of those questions. – David Thomas Mar 03 '15 at 21:29
  • My question is the first one. I just want to know "how can we find all elements with attached event-listeners?". In fact, I am interested in knowing that how Visual Event detects those elements? If it can do that, then why we should not be able to do that?! – Suo6613 Mar 03 '15 at 21:38

1 Answers1

2

There are no built-in functions that support this.

The neatest way I know of is to overwrite the addEventListener method on Element.prototype with your own method that records the additions/removals of event listeners on DOM nodes. You can then expose a function to enumerate them.

This modification will of course need to be run before the relevant event listener activity in your application.

See How to find event listeners on a DOM node when debugging or from the JavaScript code?

Note that Chrome has built in support for this functionality via getEventListeners and a dedicated UI in the dev tools.

Community
  • 1
  • 1
Ben Aston
  • 53,718
  • 65
  • 205
  • 331