We already know what an event listner is and how it works, and now I'm going to consider a bit advanced
stuff regarding event listeners.
Let's go back to Brackett's.
When we talked about functions inside an event listener, you remember that there were two ways.
The first was to pass anonymous function as a parameter, and the second way was to create function
outside element listener and then pass the function inside it as a parameter.
But you might notice that in both ways we could not pass the arguments for those functions.
In order to do that, we can use a little tweak, which is a very simple let's use this code from previous
lecture.
And at first I want to pass parameters inside the function A so right your X and Y after that inside
cancel that log.
Right, for example, X multiplied to Y.
Then in order to pass the arguments, we need to use anonymous function.
And in that anonymous function we need to call function A with arguments.
So right here instead of a function.
And then in all function a right, a antipasti arguments, for example, five and 10 reloads, then
click on Harding and you see that we have 50 in council.
OK, so generally at Limitlessness doesn't allow us to pass arguments inside functions, but if you
need it, you can use this simple trick.
OK, now I'm going to talk about another important thing regarding events, which is called Evenflo.
Let's first let's take a look on indexable extremophile.
You see here that we have developments, which is a rapper, it contains all the elements and if we
attach an event listener to that element, then click on any element inside this live, the event will
be fired.
Suppose that another listener is attached to had the element which is inside development and also another
one is attached to H2, had an element.
Then what will be the sequence of events when we click on H2 element?
It's interesting because when we click on Ista Element, it automatically means that we click on header
and div as well.
Let's see what happens.
Go back to script dodgiest file and remove these codes.
I first the mentioned elements, so create variable def equals document dot query selector, then right
def dot tarapur because it has the class name repr.
Then we need to select the element, so create the variable of our header.
Equals document dot querrey selecter.
And right here, Heather.
And the third one, which we want to selectees, H2, had elements of our H2 equals document.
Dr. Gregory Selecter.
Had to.
OK, after that, attached to each of these elements, add event listeners.
So let's talk from def right def dot at event listener than past the click event.
Right click.
Then the second parameter function.
And inside the collaborationists ride Castle, good luck.
From Steve.
Now I'm going to copy it and paste twice.
Then change deep into Heather, right, Heather?
And also inside the castle, right from Heather and then below, right instead of the H2 element.
And again, he castle that log right from age to.
Reload, then click on H2 elements and you see that the sequence is following the event, firing started
from inner elements at the first event was fired for H2 elements, therefore header and then four deep.
In order to make our example clearer, let's add some features for each function.
DeLay each function execution for a second four.
That creates variable delay.
And then use one of the methods of date object, which is get time.
This method returns total amount of milliseconds from 1970.
So right now to date.
And then use get time method.
Don't get time, and now we need to add to that thousand milliseconds after it's I'm going to use a
while loop, which will have the following condition right while and inside the parentheses.
Right.
New date.
Is less than delay.
OK, so what does this two lines mean?
When the function is executed, then why Loop gives us one second, because the condition inside it
will become false in one second.
The reason of this fact is that current time is less than delay with one second, let's copy those lines
and paste for the rest of the functions.
Then reload, click on heading.
And you see clearly what is the sequence of events firing in this case?
So sequence of even firing from in your element to outer is called even bubbling, and it is the default
behavior, as you remember from previous videos that we're talking about, the third parameter of elementalist
method, which is a boolean value and is optional.
You see that here we don't have this parameter, but if we write false for each at event listeners.
Then reload and click, you see that nothing is changed, we have the exact same result.
That's because at event listener has faults for the third parameter as a default.
But if we change falls into true.
Then again, reload, click, and you see that we have an opposite result, the sequence of even firing
is from outer elements to inner.
This is called event capturing.
So remember that when the sequence of events firing is from in order to alter, it's called event public
and in case of from outer to inner, it's called event capturing.
And you can manage it using a third parameter, which is a boolean value.
All right.
Before we finish talking about events, I want to show you how they actually work behind the scenes.
So let's comments this could out and then grab a few elements and also at event listener.
Then change the text in council, right from Cleek event.
Then create a function A.
And inside the cooler breezes, right, Castle, that log.
From function eight.
Then cut these lines of code in order to delay execution of codes for three seconds and paste them inside,
function a then change thousand into three thousand.
Then call this function.
And after that, below, right, consider log.
Global code is executed.
So when I reload the page.
The execution of function eight will be delayed for three seconds, and during these three seconds,
I will click on two elements and let's see what happens.
So reload and click a couple of times.
And you see that we have front function, a then global code is executed and from click event.
So what happens when we reload the page?
Global execution context is created.
Then Function A creates its local execution context.
And actually during execution of function A, we have clicked on adding elements, but the function
inside adamant listner did not start execution.
It is waiting until function.
A finish is execution and then global cult after that was the function inside event listener.
So it means that at first JavaScript engine executes of the codes and after that it waits for events.
All right, that was all about events.
See you in the next video.