Monitoring Events With Chromium

If you have a chromium-based browser you can find out what events are affecting a particular item on you web-page using the monitorEvents function.

Monitoring Events

Inspect The Element

First right-click on the element that you are interested in and pick "Inspect element" from the context-menu.

inspect_element.png

Enter the Event Type

There are multiple event types to chooske from (mouse, key, touch, and control). In this example I'll monitor mouse events. In the javascript console enter:

monitorEvents($0, "mouse")

Now, as you do things with your mouse on the element, the console output will show you the the events as they happen.

mouse_events.png

Listing Event Listeners

To see the event-listeners associated with the element enter the following at the console.

getEventListeners($0)
get_event_listeners.png

Picking Elements At The Console

You don't have to use "Inspect this element" and $0, you can grab an element at the console with javascript instead.

monitorEvents(document.getElementById("changing-what-you-monitor"), "mouse")

Will monitor mouse-events for the headline to this sub-section.