The Execution Order of Event Listeners
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.