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

The `error` and `beforeunload` events have their own bespoke approaches to canceling the event because nothing is easy.

Instructor: [0:00] The error and before unload events have their own bespoke approaches to cancelling an event because nothing is easy.

[0:08] First up, error events. Here I'm creating a constant called value, where I'm assigning that to be something. Something is not defined, so this is going to create a reference error which we're seeing over here.

[0:19] The default behavior of this reference error is that an uncaught reference error is being logged to the console. Here I'm adding an onerror element property event handler, and I'm assigning it a function called whoops(), just for fun.

[0:32] Inside this function, I'm going to return false in order to try and cancel that event. If I refresh the page, I'll see that I'm still getting an uncaught reference error. Something is not defined. The default behavior of logging out something is not defined is still happening.

[0:46] It turns out for our window.onerror, you do actually have to return true rather than false in order to cancel the event. We know .onerror is not provided with an error event, so this is legitimately the only way to cancel an error event from a window.onerror element property event handler.

[1:07] Alternatively, you can use addEventListener to listen for error events on the window. You will be provided with the error event. You can call event.preventDefault() to cancel it like that. We can see nothing's been logged to the console because the default behavior of logging to the console is being prevented.

.[1:24] onerror element property event handlers on other elements behave just as other element property event handlers, so return false will cancel the event. These ones are also provided with the error event itself unlike window.onerror, so you can leverage the standard event.preventDefault to cancel an event.

[1:44] Things get even stranger with the beforeunload event. Cancelling the beforeunload event requests the browser to prompt the user to ask whether they meant to close the page. Here I'm creating an onbeforeunload element property event handler. I'm assigning a function called onbeforeunload.

[2:02] I'm going to return false to try and cancel the event just like other element property event handlers. When I come over here, I try and reload the page. Return false did cancel that event, and I'm seeing this pop up.

[2:16] What's different about beforeunload is that I can return almost anything from this function to cancel the event. I could return true, return a number, return a string, return an object, it's all good. When I try and refresh the page, cool, the event got cancelled.

[2:28] You have to return either undefined or null in order for this function to not cancel the event. If I come over here and refresh the page, I'll see I didn't get that big warning pop up because the event was not cancelled.

[2:40] You might be thinking, "Hey, rather than returning false or returning some other value, why don't I just do event.preventDefault? That's the standard way of cancelling events, right?" Not for onbeforeunload. Here, I'm going to call event.preventDefault, refresh the page, and boom. No warning, event wasn't cancelled.

[2:56] Let's try addEventListener for beforeunload. I'm going to try and use event.preventDefault in order to cancel this event so that I get that little pop-up. I'm going to refresh the page, nope. That didn't work either.

[3:09] Firefox is a bit more reasonable here. Event.preventDefault will actually cancel this event, so when I try and refresh the page, I'll get that lovely little pop-up.

[3:18] In order to cancel the event in Chrome at the time of recording, you can assign any value you want to event.returnValue to cancel the event. I mean, probably the most sane would be to assign false, which is pretty standard behavior. Again, Chrome doesn't really mind, so I'll set this to "Hello World" just because.

[3:38] I come over here to Chrome and I click refresh, and yep. That cancelled the event for some reason. Probably the most reasonable thing to do here is to assign false to returnValue, which is a discouraged but at least standard way of cancelling an event.

[3:52] Beforeunload is a huge mess. You got to do what you got to do, but keep in mind that it is a bit different to everything else.

Course

Your Ultimate Guide to Understanding DOM Events

Cancel Bespoke Events

Share this video with your friends