Advanced DOM and Events | Lifecycle DOM Events

In this lecture, we will take a quick look at a couple of different events that occur in the DOM during the lifecycle of a web page. And when we say lifecycle, we mean right from when the page is loaded in the browser to when the page is closed.

The first event we need to talk about is called DOMContentLoaded. The document fires this event as soon as the HTML is completely parsed. i.e., the HTML has been downloaded and converted into the DOM tree. Also, all scripts must be downloaded and executed before this event can happen.

We can, of course, listen to this event using the addEventListener method. And we can do this in the following way:

script.js

document.addEventListener('DOMContentLoaded', (e) => {
  // do something
});

Note that this event does not wait for images and other external resources to load. Only HTML and JavaScript. Let's log the event object to the console and see what we get:

script.js

document.addEventListener('DOMContentLoaded', (e) => {
  console.log('DOM Content Loaded ', e);
});

DOM Content Loaded

You can also see the time that it takes for the event to be fired.

DOM Content Loaded Time

So, we can use this event to execute code that should only be executed once the DOM is available. But does that mean we should wrap our entire code in this event listener? Well, actually, no. And that's because we have the script tag, which is the one that imports our JavaScript code into the HTML.

index.html

<body>
  <!--HTML CODE-->
  <script src="index.js"></script>
</body>

And with this, the browser will only find our script when the rest of the HTML is already parsed. So, when we have the script tag at the end of the HTML, then, we do not need to listen for the DOMContentLoaded event. Now there are also other ways of loading the JavaScript file with the script tag, but we will talk about that in the next lecture.

If you are coming to Vanilla JavaScript from JQuery, you are probably used to wrap all your code into a document-ready function (document.ready). This is equivalent to the DOMContentLoaded event in Vanilla JavaScript.

Next up, we have the load event. This event is fired by the window object as soon as not only the HTML is parsed, but also all the images, and external resources like CSS files are loaded. So, basically, when the page is fully loaded.

We can listen for this event in the following way:

script.js

window.addEventListener('load', (e) => {
  console.log('Window Loaded ', e);
});

Finally, the last event I want to show you is the beforeunload event, which also gets fired by the window object.

script.js

window.addEventListener('beforeunload', (e) => {
  console.log('Window Before Unload ', e);
});

The event is created immediately before the use user is about to leave a page. For example, when a user clicks the close button on a browser tab. So, we can basically use this event to ask users if they are sure they want to leave the page.

script.js

window.addEventListener('beforeunload', (e) => {
  // preventDefault is required by some browsers. In Chrome it is not necessary.
  e.preventDefault();

  // To show the confirmation message
  // Weird 😕, but for historical reasons, this is how it works.
  e.returnValue = '';
});

Note that, for some browsers, clicking on the browser's tab close button will not trigger this event. That is, the page will be unloaded without any confirmation. This, for example, happens in Chrome. Because as of Chrome 60, this event is not fired unless the user has interacted with the page. Also, before, we were able to customize the message that is displayed to the user. But then people started abusing this feature, and now we can only see a generic message. So, matter what we put in the e.returnValue property, the user will only see a generic message. You can learn more about this here.

Before Unload

const - JS | lectureAdvanced DOM and Events