确定是否在DOM内部的元素上附加了函数

Question

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?

Answer 1

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.