It's time to talk about one of the most important aspect in Tom and general in JavaScript as well.
I'm going to show you how the Web pages can be interactive and dynamic using JavaScript events.
So what is an event, events or actions that happen on a Web page?
Your programming, as you remember, when we have been talking about functions, we said that in order
to execute function, we need to call them.
In this case, the same happens.
But invoking function is managed by users behavior.
I mean, if the user clicks on button or presses the keys or keyboard or moves the mouse and many others.
So you can imagine how powerful and interesting things I'm going to show you.
All right.
Let's go back to Brackett's.
At first, I want to say that there are different ways to set up JavaScript events and we will cover
all of them.
Now let's open indexed demo file and select one of the elements which will be used in order to attach
the event.
Let's choose adding a two element, then go back to script or JS file, which is empty for now, and
get access on that element using query selector method.
So create variable H to equal document dot query selector and inside the parentheses right header H2.
Then in order to attach click event to that element, we need to write following H to dot unclick.
Each time when we use events, we need to always right on before the actual name of the event, in this
case, I use click event, which is one of the most frequently used.
But besides the event, there are lots of other events, like on mouseover, on mouse, out on key press,
onload and many others.
OK, now we need to assign to the event the function, but in this case the function should be anonymous.
So we don't need to assign the name to that function.
Right function.
And inside the curly braces, right, counsel, the clock and standard text collect.
Reload the page, so if we click on adding elements, you'll see that we have clicked in console, it
means that when I clicked on hatting, event was fired and the function was executed.
OK, we can use another event on an element, let's say mouseover, and I'm going to copy it and then
change unclick into mouseover.
And also change the text in council, right, mouse over.
Reload.
If we mouse over the heading element, then the second function will be executed.
So you see in mouse over and if we click on having that click event will be fired.
Therefore, we have clicked in console.
All right.
Besides this kind of way, we can attach events to elements in a different way.
I mean, that we need to add events as the HTML attributes to elements.
But in this case, we don't need anonymous functions anymore.
We need to assign names to these functions.
So let's get rid of these codes.
And right, function A and function B.
Then go to index dot extremophile, find hiding elements and inside edge to tug at events as attributes
right on Cleek.
And as the value of that attribute, we need to write function name eight with parentheses.
Then at second event, attribute or mouseover and the value as function B.
Reload.
And you see that the same happens as in previous example when we click or mouse over the heading out.
All right.
I have demonstrated this approach just for your information.
This way of adding events is a little bit older and sometimes not flexible.
So I do not recommend to use it.
But anyway, you should know this approach because in practice, in the future, you may sometimes come
across this type of coding.
All right.
What of the disadvantages of that approach is that when we assign the exact same event attributes with
different functions, then only the first one is executed.
So let's prove it.
If we change on mouse over into unclick
and also.
The text inside Castle, the log right here, clicked and then clicked B.
Then reload, if you click on Harding, then you will see that all the function is executed and Function
B is ignored in order to fix that, I mean to attach to the element similar events and also execute
all of them.
We need to use model and a frequently used approach, which is to add event listeners.
So let's stop here and discuss how to use an event listener in the next video.