Developer tools – Event Listeners

Confess your faults one to another, and pray one for another, that ye may be healed. The effectual fervent prayer of a righteous man availeth much.

James 5:16

Elements – Event Listeners

In Chromium engine based web browsers like Microsoft Edge and Google Chrome to open The Event Listeners panel, right click on the element which you want to monitor and select “Inspect”. After that choose Console tab and type “monitorEvents($0);” and press Enter. This means that the selected element is attached to the variable $0 and every interaction with it will be displayed in the Console log. Hover the mouse cursor over the element to see the response headers. The web browser keeps last five selected DOM nodes in indexed variables from $0 to $4. To stop monitoring type “unmonitorEvents($0);”. This way you can easily find event listeners on a DOM node when debugging the code.

Monitor an element events

All Event Listeners

Another way to open the Event Listeners tab is to click Ctrl + Shift + I and then click on the “Event Listeners” tab you will see all the event listeners bound to the element. You can remove an event listener by clicking the “Remove” button or see the output of the JavaScript function that calls it. Here is an example for the event listener of mouse click event on the main articles panel.

<div id="applet_p_50000313" class="ntktdv2 wafer-rapid-module " data-applet-guid="p_50000313" data-applet-type="ntktdv2" data-applet-params="_suid:50000313" data-i13n="auto:true;sec:strm;useViewability:true" data-i13n-sec="strm">
<!-- App open -->
........................................
........................................
<!-- App close -->
</div>

Click event listener on the div element and its program file

Its file name is rapid-3.53.38.js and if you click on it, the viewer window will open. Usually these JavaScript files are minimized, reduced in size and are difficult to read. Press the curly brace button to make the source code readable.

Retrieve Event Listeners for a specific elements type

Another way to retrieve listeners is through the Console tab. Write the method  getEventListeners() and as an argument specify an object from DOM. Еxamples:

// Get all window object Event Listeners.
> getEventListeners(window);

// Get all body element Event Listeners.
> getEventListeners(HTMLBodyElement);

// Get all buttons Event Listeners.
> getEventListeners(HTMLButtonElement);

// Get all paragraphs Event Listeners.
> getEventListeners(HTMLParagraphElement);

The response is usually an Оbject which you can unfold to view all Properties and Мethods.

Response object