Now to close off this section,
let's take a quick look at a couple of different events
that occur in the DOM during a webpage's life cycle.
And when we say lifecycle,
we mean right from the moment
that the page is first accessed, until the user leaves it.
And let's do that right here at the end of this file.
Now, the first event that we need to talk about
is called DOM content loaded.
And this event is fired by the document
as soon as the HTML is completely parsed,
which means that the HTML has been downloaded
and been converted to the DOM tree.
Also, all scripts must be downloaded and executed
before the DOM content loaded event can happen.
And of course we can listen to that event,
and since it happens on the document,
we call the add event listener method on the document.
And then name of the event is, as I mentioned,
DOM content loaded.
All right,
now this event does actually not wait for images and other
external resources to load.
Okay. So just HTML and JavaScript need to be loaded.
So let's now take a look at this event or basically just
lock something to the console.
So HTML, parsed and DOM tree
built, and we can also take a look at the event.
Okay.
So let's see.
And so indeed we get the event here, right?
Basically at the beginning and in this case,
it's a bit hard to see.
And so let's again, go tour a network tab
and I'm decreasing it here and I will set it to fast 3G now.
And down here,
you can actually see the time that it takes for the event to
be fired.
So in this case, it was just 85 milliseconds.
And so therefore it was a really fast.
So let's try that again with a fast 3G connection.
And so now it actually took two seconds for the JavaScript
and the HTML to load,
but you see that still after that some other code here or
some other stuff kept loading.
So that's probably all these images that we have here.
And of course, as we keep scrolling, there these
other images also start loading. So that's,
what's happening here.
All right.
So this year we can now execute code that should only be
executed after the DOM is available.
And in fact,
we want all our code only to be executed after the DOM is
ready.
Right?
So does that mean that we should wrap our entire code into
an event listener like this?
So with a function like this, well, actually, no,
we don't need to do that.
And that's because we have to script tag,
which is the one that imports or a JavaScript into the HTML,
right. At the end of the body.
So you see it is down here.
So basically it's the last thing that is going to be read in
the HTML.
And so basically the browser will only find or script when
the rest of the HTML is already parsed anyway.
So when we have to script tag here at the end of the HTML,
then we do not need to listen for the DOM content loaded
event. Okay.
Now there are also other ways of loading the JavaScript file
with the script tag,
but we're going to talk about that in the next lecture.
Now, right now, if you're coming to vanilla,
JavaScript from jQuery,
then you're probably used to wrap all your code into a
document ready function, which in JavaScript,
or actually in jQuery, it looks something like this.
And so this is equivalent to the DOM content loaded in
vanilla JavaScript.
Okay.
But again, no such thing is necessary in regular JavaScript.
Okay.
Anyway,
next up there is also the load event and the load event is
fired by the window. As soon as not only the HTML is parsed,
but also all the images and external resources like CSS
files are also loaded.
So basically when the complete page has finished loading is
when this event gets fired.
So as always, we can also then listen to that.
So load.,
function,
and then here we can log.
Page fully loaded along with the event.
So let's take a look here in our console.
So we already got this event. And then at the end,
when everything was finished, we also got this load event.
So you see it's just a regular event object like we already
know.
And again,
this load time actually appears down here in the network tap
now, right?
We can also see the amount of kilobytes that was downloaded.
And so this network tab is really nice and it gives us a lot
of information about loading our pages.
And of course you can try to explore this network tab a
little bit more on your own.
Now, finally,
the last event that I want to show you is the before unload
event, which also gets fired on window.
So window.add event listener.
And so that's before unload.
And this event here is created immediately before a user is
about to leave a page. So for example,
after clicking this close button here in the browser tab,
so we can basically use this event to ask users if they are
100% sure that they want to leave the page.
Now in some browsers to make this work,
we need to call prevent default here. In Chrome
it's not necessary, but some browsers require it.
And then we can also take a look at the event itself.
Here let's remove that.
And actually in order to display a leaving confirmation,
we need to set the return value on the event to an empty
string.
So return value and an empty string.
And this probably looks a bit weird,
but this is for historical reasons.
All right.
So let me show you what happens as we try to close the tab
now.
And so now we get this pop up here, indeed,
which asks us if we want to leave the site.
Now a long time ago,
developers were actually able to customize the message
that was displayed here, but then of course,
many people started to abuse this.
And so now we can only see it as a generic message.
So no matter what we write here,
we will always get this same pop-up.
Okay.
So let's remove this and this can,
of course sometimes be useful,
but sometimes it's also a bit too much.
So let's actually remove all of this year.
Okay.
Now we cannot even reload the page here.
I will actually have to open up a new tab with this and
close this one.
Alright.
So really please don't abuse
this kind of feature because a message like this is of
course pretty intrusive and it should only be displayed when
necessary.
So don't be one of these developers who abuses too much
power.
So the only time you should prompt the user,
if they really want to leave the page is for example,
when the user is leaving in the middle of filling out the
form, or like writing a blog post or something like that.
So a situation in which data could actually be lost by
accident.
And that's actually all I had to show you.
So that's the three events that can be quite helpful in some
situations. And specially this one, I would say now, right?
And now in the next video to finish this section,
we will take a closer look at this event and at different
ways of loading scripts in HTML.