Original subtitles

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.