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

It is possible to add many event listeners using different binding approaches to an `EventTarget`. In this lesson, I explain in what order event listeners will be executed in.

Instructor: [0:00] Event listeners added to an event target are called in the same order that they were bound in. It does not matter what mechanism you use to create an event listener. The order in which they are bound will be the order in which the event listeners are called.

[0:20] Here, I'm adding an event listener to the button, which will log out addEventListener1. Here, I'm adding an onclick element property event handler to my button, which will log out onclick. I'm then adding another event listener to my button. This one will log out addEventListener2.

[0:37] When I click my button, I can see that addEventListener1 was logged to the console, and then onclick, and then addEventListener2, which matches the order that I bound these event listeners in.

[0:48] Here, I have a function called first(), which logs out first to the console, and a function called second(), which logs out second to the console. I'm then adding a click event listener here using the first function, and then I'm adding another click event listener using the second function.

[1:03] If you call addEventListener with the same event type, listener reference, and capture value as another call to addEventListener on the same event target, then a new event listener is not created. In this case, because I already have an event listener for the click event with the first function, this will not create a new event listener.

[1:20] This call to addEventListener will not impact the original binding order of these event listeners. When I click my button, I will see that first is logged and then second, which reflects this original bind order. This third call to addEventListener did not impact the original bind order.

[1:38] In order to change the call order of these event listeners, I'm firstly going to remove the event listener, but use the first function so only one event listener is left, the one that's using the second function. If I click the button, I'll see that only second is logged out.

[1:52] I'm now going to re-add a click event listener using the first function. Now, this first function will be added in the second position. If I come over here and click my button, I will see that now second is logged out before first. I was able to change the order of these event listeners by removing one and adding it to the end.

[2:13] Here, I'm setting a button onclick element property event handler, which is going to log out onclick1. Then using addEventListener to add a click event listener, which will log out addEventListener. When I click my button, I see that onclick1() is called before addEventListener.

[2:28] I'm now going to reassign the onclick event handle property to a new function, onclick2(), which is going to log out onclick2. When I click my button, we'll see something quite interesting. Onclick1 is no longer being logged, and onclick2 is logged before addEventListener. After this, I'm going to set the button onclick attribute so that it will execute console.log('HTML attribute') when called.

[2:57] When I click my button, HTML attribute is logged before addEventListener. If you change an HTML attribute or object property event handler, then the original bind order is respected. It's best to see these two calls here as reassignments of this original binding.

[3:15] If you explicitly unbind an HTML attribute or an element property event handler, then its original bind order is lost. Here I'm going to set button.onclick to null, which is going to clear this original onclick event handler and then I'm going to assign button.onclick again to this function which will log out onclick2.

[3:34] When I click my button, I'll see addEventListener logged and then onclick2. This was the original first binding and then this was the original second binding.

[3:44] The first binding, my onclick function is being cleared here and so addEventListener's moving into the first position. Now I'm creating a new onclick element property event handler which will now be in the second position. We can see that reflected over here when we click the button.

Course

Your Ultimate Guide to Understanding DOM Events

The Execution Order of Event Listeners

Share this video with your friends