The Event Listeners Tab is present in the Elements tool in Chrome and is used to check various event listeners of the elements present in the web page. You get various options, such as filter, refresh, include ancestors, and many more, in the context menu.
Table of Content
Benefits of the Event Listeners Tab
The various benefits of the Event Listeners Tab are:
- View events listeners: In the tab, you get a list of all events listeners associated with the selected element. This helps a lot to inspect the various types of listeners associated with the element, which may not be possible in a huge codebase.
- Link to Sources Tab: If you expand the linked event listener, you will get the respective file name along with the line number where the event listener is defined. This file name works as a link, and when clicked, it will bring you to the respective file with the respective line number in the Sources tab.
- Option to remove: You can also remove the event listener for debugging or testing purposes. Sometimes, because of multiple event listeners, it becomes very hard to test a particular event, so this option comes in handy.
How to open the Event Listeners Tab in Chrome
The Event Listeners Tab is present in the Elements tool in DevTools for Chrome. To open it, follow these steps:
- Step 1: Using Chrome, visit the web page. Right-click on the web page and select Inspect to open DevTools. Alternatively, you can open DevTools by using the shortcuts “F12” or “Ctrl+Shift+I.”.
- Step 2: In DevTools, click the Element tab, and then in the panes section, click on the Event Listeners tab.
Opening Event Listener Tab
Various options in the Event Listeners Tab
You can expand any event listener and get all the lists of elements where they are defined. You also have the option to remove the event listener from the respective element and the option to toggle the passive of the event listener. You get the respective file name, which takes you to the sources tab. Right-click the expanded event listeners and select passive to manually toggle the passive parameter for the event.
At the top of the Event Listeners tab, you get various options. Let’s move from left to right and understand the various options this tab provides.
Various option in Event Listeners Tab
- Refresh: It is used to reload the list of events displayed.
- Ancestors: If checked, then the pane will list the event listeners of all the ancestors of the selected element.
- Drop-down list: You can select to display all event listeners or only passive or blocking event listeners.
- Framework listeners: If checked, then the pane will list the event listeners that are bound to the framework used for the web page.
Showing usage of Event Listeners Tab
Let’s use the Event Listeners Tab for the GFG site to check various event listeners of elements and remove them or filter out specific events.
- Step 1: Using the Chrome browser, visit the GFG site and open the DevTools.
- Step 2: In the DevTools, click the Select An Element option to focus on the element whose event listeners are to be viewed.
- Step 3: In the Event Listeners tab, expand the event categories and remove individual events. You can right-click the event and set it as passive.
- Step 4: Filter the events as passive or blocked. or check Ancestors to view all events of the ancestors of the selected element.
Showing usage of Event Listeners Tab
A web page may have many elements that event listeners associate with it. All these event listeners can be viewed and linked to their respective JS files in the Sources tab using the Event Listeners tab present in the Elements Tool of DevTools.