Introduction to the DOM Events Course

High-Level DOM Events Concepts

Listen to Events using HTML Attribute Event Handlers

Listen to Events using Object Property Event Handlers

Understand the Relationship Between HTML Attribute and Object Property Event Handlers

Add an Event Listener with addEventListener

Remove an Event Listener with removeEventListener

Choose an Event Listener Mechanism

The Execution Order of Event Listeners

The Execution Order of Event Listeners in the Target Phase

The Event Object

Log Events to the Console

Cancel Events

Cancel Bespoke Events

Stop Events

The Event Delegation Pattern

Create and Dispatch Synthetic Events

Deprecated Event Creation Mechanisms

Events are Dispatched Synchronously

Add and Remove Event Listeners while an Event is Dispatching

DOM Events and the Event Loop

DOM Events and Microtasks

Improve Scroll Performance with Passive Event Listeners

Default Passive Values on the Body Element

Synchronous and Asynchronous Events (Ordered and Unordered Events)

Window Reflecting Body Element Event Handlers

Debug and Inspect Event Listeners with Chrome Developer Tools

Debug Event Listener Performance with Chrome Developer Tools

Your Ultimate Guide to Understanding DOM Events

In this lesson we we will look at how you can inspect and debug event listeners in your browser by using the browser developer tools.

Instructor: [0:00] In this lesson, I am going to show you how you can debug and inspect your event listeners using the Chrome Browser DevTools.

[0:08] In this setup, I have a clickEventListener that I've added to the parent element, and it's going to logout ParentClicked when it's executed, and I've added this event listener in the capture phase.

[0:19] I'm also adding a clickEventListener to the button element which will logout ButtonClicked when it's clicked, and I'm not providing a capture value to this event listener, so it's going to be executed in the bubble phase.

[0:31] You can debug your event listener code in the same way that you would debug any code. You can add console statements. I'm going to logout the event. I can see that there. I could add debugger statements.

[0:48] Now when I click on the button, I'll see that my on parent clickEventHandler. I can now get a breakpoint in here. I can do things like inspect the disk context and the event. I can also remove the debugger statement and add my own breakpoints.

[1:04] I was to pause the execution of my application during myEventListener and I can inspect the event and also the disk context. In the sources panel, I can also go to the event listener breakpoint section.

[1:20] I can cause the browser to create breakpoints for categories of events or specific events. Here I can go in to the MouseEvents for the clickEvent. Now when I click on the button, my parent event listener added in the capture phase is being broken into first.

[1:37] I can see information about that. If I jump to next breakpoint, I can see that my button EventListener is being paused on as well. Using this I can step through all of the event listeners that were being executed as part of this event.

[1:53] There are also some developer tool command line utilities that you can use to help debug your event listeners. Firstly, I'm creating a button constant in the global scope which points to the button element.

[2:04] I could have also selected the button element which would set that to be dollar zero. The first developer tool function we're going to look at is getEventListeners. The getEventListeners function only exists within the dev tools. You can't use it in your application code.

[2:21] If you call this function with an element, it will return back the event listeners that are attached to that element. Here we can see that there was one clickEventListener added to the button. I can drill down to find out more information about that event listener. I can see it was not passive, it's type click. I can even drill down into the listener itself to find the function that's going to be executed as part of this listener.

[2:51] MonitorEvents is another DevTools only function. I can provide an object as the first argument, and then the events that I'm interested in monitoring. When I come back to the button, and I trigger KeyDownEvent, we'll see that the event name was logged out to the console, and then the event itself.

[3:12] I can stop monitoring events on the button by using the onMonitorEvents function. If I select the button, I'll open up the Elements panel, and in here, I can see a section for event listeners. This section contains information about the event listeners attached to that element.

[3:32] Here, I can see that a click EventListener has been added to the button element. I can see information about the event listener. There's also a link here and I can click on it to be taken straight to the event listener function. I can also use this drop down to filter the event listeners that I'm seeing here. I could use this to say, "Only show the passive event listeners on this element."

[3:52] Now, there are no passive event listeners on this element right now. We only have blocking ones that is non-passive event listeners. This is what's coming up. I can also toggle the ancestors checkbox to see event listeners added to ancestors of my button element.

[4:08] I can see that for the click event, there's also an event listener added to the parent element and I can drill down in here and find out more information about that as well.

Course

Your Ultimate Guide to Understanding DOM Events

Debug and Inspect Event Listeners with Chrome Developer Tools

Share this video with your friends