Need help in identifying click events

yureshwar ravuri

unread,

Jun 22, 2022, 9:28:50 AM6/22/22

to Chromium Extensions

Hi,

We are working on an Open Source Chrome extension: Digital Assistant Client

I was trying to find the click events registered on dom nodes. For some of the nodes, the click events are not visible when I check in developer tools. How can I find the click event associated with the respective element? Can anyone help me in regards to this?

Please find the example that I am referring to. In JIRA when I click on create a new issue there is a drop-down for issue type. When I inspect the element I don't find any event listeners for click-in developer tools. Can anyone help me in regards to this?

Thanks & Regards,
Yureshwar Ravuri
Mob: +91 9030003889
Mail: yure...@gmail.com

hrg...@gmail.com

unread,

Jun 22, 2022, 10:14:29 AM6/22/22

to Chromium Extensions, yure...@gmail.com

Event listeners are often added to an ancestor of the desired element, not to the element itself.

You must check the "ancestors" checkbox so that DevTools shows the listeners added to all the element's ancestors.

Unfortunately, though, the capability to obtain the event listeners of an element only exists in DevTools and the DevTools protocol. You can't do that with standard Web APIs.

However, the old way of adding event listeners via properties such as "onclick", "onchange", etc. allows you to get those listeners simply by reading those properties. But this way of adding listeners is not very popular nowadays, so you can't rely on it.

yureshwar ravuri

unread,

Jun 22, 2022, 10:39:00 AM6/22/22

to hrg...@gmail.com, Chromium Extensions

Hi,

I have checked with ancestor's checkbox checked. But it doesn't give the click event listeners of that particular node. It fetches all the event listeners on the dom page.

Thanks & Regards,
Yureshwar Ravuri
Mob: +91 9030003889
Mail: yure...@gmail.com

hrg...@gmail.com

unread,

Jun 22, 2022, 11:23:28 PM6/22/22

to Chromium Extensions, yure...@gmail.com, Chromium Extensions, hrg...@gmail.com

The "ancestors" checkbox gives you the listeners of all ancestors up to the window object, including the <body> element and the Document object.

So, it's expected that you see a lot of event listeners. Some Javascript frameworks prefer to add all listeners to some root element of their choice instead of the actual element where the event is expected to occur.

Reply all

Reply to author

Forward