How to interpret the information about an event listener shown by Firefox in devtools?

To get the event listeners bound to an element in Firefox, just right-click on the element, click the “Inspect” menu item, then click the “event” badge next to the element in the Inspector tab.

In the popup event viewer, you can inspect all event listeners bound to that element. It is not hard to find event listeners, but not easy to understand the information shown for the event handlers. Let’s examine one of the eventlisteners. It is an event handler for the click event.

How to read the line shown for the event listener in dev tools? Click the right-pointing arrowhead, it will become a down-pointing arrowhead, and the source code of the event handler is displayed below. Next to the arrowhead is the file that includes the event listener and the position of the event handler in that file. Then comes a curved arrow. Click the curved arrow, you will be brought to the Debugger tab of the developer tools, and the file including the event handler will be shown there(the event handler will be highlighted). You can debug the click event listener there such as setting a break-point. Next to the curved arrow is a label showing “Bubbling”. According to this article, this label indicates whether the event bubbles. This is hard to understand because every event bubbles. And it is not meant that the event handler does not call the stopPropagation function. In fact, this label can take the value of “Bubbling” or “Capturing”, which means whether the event handler is called in the bubbling phase or the capturing phase of the event, i.e., whether the third parameter of the addEventListener function is set to true or false. The checkbox at the end of the line is for you to enable or disable the event listener. If you tick off the checkbox, you are removing the even listener from the element temporarily. Sometimes, you may see another label showing “DOM2” or “jQuery”, which means this is a DOM event handler or a jQuery event handler.

In this tutorial, we teach you how to view event listeners in devtools of Firefox. When inspecting a event listener, we further introduce to you the detailed meaning of each field in the developer tools.

References:

https://www.stanleyulili.com/javascript/how-to-find-event-listeners-on-a-dom-node-when-debugging/

https://blog.alyssaholland.me/how-to-inspect-event-listeners-in-firefox

https://devtoolstips.org/tips/en/disable-event-listeners/

Did you like this?
Tip admin with Cryptocurrency