All right, we are back and let's continue talking about events in JavaScript, as I said in previous
video, I'm going to consider JavaScript event listeners in this lecture.
So what is an ADD event, listeners?
It is a method that attaches and even handler to the specified element.
And it does this without overwriting the existing event handlers.
You're able to attach as many, even handlers, to one element as you want.
All right.
Let's go back to our text editor.
Get rid of these coats, except the first line, because I'm going to use again the heading H2 element,
then go to index DOT extremophile and remove the even attributes as well from H2 Haddington because
we don't need them anymore.
OK, so now I'm going to attach an event listener to extra element in order to fire the click event.
For that, we need to write H2 thought at Event Listener.
Remember that ad even, nor is that case sensitive, so you need always to write the words with capital
letters, except the word ad, then open parentheses and pass the first parameter, the imit name as
a string right to your click again.
Remember that when you use an event listener, you always need to pass the event name without on as
it was in previous approach.
So you need to write, just click and not on click.
The second parameter in at event listener method is a function which should be again an anonymous function
and third parameter is a boolean value.
True or false, which is optional.
And we will discuss it a bit later.
So right here function.
Then inside the parentheses, right, constant dialogue.
Cliqued.
OK, reload the page, then click, and you see it works when I click on Having Clicked appears in console,
you can create the function outside the event listener.
But in this case, you need to use a regular function as a parameter.
And at least now you need to pass the function name but without the parentheses.
So let's create the same function outside and call it a.
Then inside the court, the process rights again, consultor log collect.
And then instead of anonymous function, let's put the function name as the second parameter.
Reload that click and we have the exact same result.
All right, as you remember from previous lecture, we were talking about the disadvantage of an approach
where we were using even attributes in elements that we could not use the similar events, but with
different functions at the same time in case of an event listener method, it's possible.
So let's call it a function and change it slightly right here.
The function name be then collect, be in council also for the function a let's write, collect a then
add another event listener to H2 element and just change the function name write be.
Reload, then click.
And he said that both, at least in this work, when I click on Huddinge, both click events fail and
in council we see it clicked and clicked.
B That is one of the differences between add event listeners and event attributes.
All right, now I'm going to talk about an event object, so what is an even object when an event occurs,
the event object is created, it tells us the information about the event, the information about which
element the event happened, on, which key was pressed for a key press event or exactly at what part
of the page the user clicked for a click event and so on.
When the event object is passed into a function, it is often given a parameter called eat or sometimes
event.
All right, let's remove these coats and just leave one function with the proper at event listener,
then pass it as a parameter and write it inside.
Cancel that log as well.
Reload.
Then click.
And you see that in council, we've got the type of event, which is most events, if you drop down,
it's you will see the list of different properties and their property values.
Let's consider some of them.
For example, the first property is Alky, which has a value false.
It means that when I clicked on heading, I haven't been pressing on key.
If I reload the page again, then click the heading.
And at the same time I keep pressing on alt key that it will get the value as a true.
So you see that we have true.
OK, if you go down, you will notice client X and client Y properties, those properties indicate the
exact coordinates of the clicked spot on the page.
I mean, the whole browser window client X shows us the number of pixels from the left and client Y
shows the number of pixels from the top.
The next and useful properties which you may use in the future are offset X and offset Y.
They are similar as client X and Y, but the difference is that it measures pixels of the element itself.
OK, if you go deeper, you will see the path property, which consists of items from the current element
to the global window object.
If you drop down it, you will notice that it's actually an array.
You can use those items with their proper index numbers and manipulate on that below.
You can find the type of event which tells us that it's a click event.
And also we have here a target property, which I think is the most important property in that list
because we will frequently use it and also we will meet it in the future.
Many times you'll see that it has a value H2.
This is the element on which we have bound the click event.
Let's use this property and see exactly what it returns right inside the console.
Don't target.
Remote.
Click and we have H-2 aliment with its contents note manager.
OK, now I'm going to show you kind of an interesting thing that gets rid of E parameter and inside
console, right?
Special what this so what to expect to get.
Let's reload, then click.
And you see that we have the same H2 element.
I hope that this result is not surprising because you know, that this key word refers to the object.
And in this case, H2 is an object on which kallick event is attached.
Therefore this quote refers to H2 element.
All right.
As we said, there are lots of JavaScript events, but we are not going to discuss each of them because
I think that it will be a little bit boring.
There is a great source regarding events.
You can visit developer Dot Mozilla dot org website and you can find here list of the most commonly
frequently used events.
I recommend to overview this list.
It would be great if you introduced the majority of these events because in the future you may need
to use some of that.
You'll be able to find this link in the text document which will be attached to that lecture.
All right.
We are not done with events yet in the next video, I'm going to discuss more advanced things regarding
events.
So let's move on.