Welcome, everyone, in this lecture.
We are going to learn about event bubbling and the event delegation to this lecture will be after our
storage HMO when we are finished with those things.
Now, create this app that gives an inside application BMT and inside is index HTML.
Just link this app just right now.
What is even bubbling an event delegation.
We didn't I didn't have a chance to explain to you.
That's why I'm doing this.
And I consider this is a very important for you to know.
Now, even bubbling is something that is happening when we have an event in that bubbles through the
dorm.
For example, let's say that we have event here in this trash, right when we click this icon, actually,
and that event is going to bubble up to its parent.
The first parent of this attack, I mean, of this AI class is actually the trash.
These atrip then is going to bubble up to the bearing, the Spanish that not actually parent, but to
do list is the parent.
And after that, these elai have its own you.
Well, as a parent, right.
That is how the event will bubble up.
It will spread through the dorm like like a virus.
So we need to have a way how we can stop it.
So as I told you, we can have any mouse click or any event that we have on any elements in our extremophile
and that element have its own parents.
So, for example, if we even put your event, even listner to these elements, they are inside the
U.S. So they are child of the UL class.
So your class is the parent.
Now, this is called even bubbling and we need to find it, fix it with even delegation.
So event delegation is simply to stop the bubbling through the dome, and it's quite opposite to what
event bubbling is doing.
So the solution is to find, for example, all of these trash.
We need to find a parent in the parent.
We don't have to go further.
We can just find a parent.
It's this ALLAI or you don't have to be the first parent you're going to find.
You don't have to be this.
It can be even this.
But the thing is that we need to find a parent of the element that we want to catch.
Right.
Of the event that we want to catch.
So now when we have a parent, we can put an event handler on that parent.
And with our dumb manipulation, we can target a child.
So I know the parent.
I can target the child.
That is pretty much it.
Now, again, even bubblies happening when we have event bubbling through the DOM, an event handler
is the opposite.
We're trying to catch that event bubbling and we put that event on the parent.
We not put it on the item that we want that event to happen.
Good.
Now, I'm going to show you how this is working in the real deal.
So I'm going to put here you will see how this event is bubbling.
OK, now just put here even bubbling and event delegation.
So the first will be event bubbling.
And now we're going to find some you can find any element that you want to test this out.
So I'm going to find this to do list element.
Right.
I'm just going to get get this ALLAI class.
So I want to document that query selector.
I want to to target sorry to target that one in what I also want to say an event listener in here.
It will be click and I'm just going to need to do list the function so I'm not going to call the function
with these brackets here.
The function will be called by the event listener.
We can just name the function here and function to do list right here and see here Conjola for example,
to do list element click.
OK, let's find it out.
Open your localhost, open the index, the HMO file.
And when I click here, here it is.
It's happening to do list allai element is clicked right now.
This is not showing you actually anything.
So how we can just see if this event bubbles up.
So that will be the example.
So I need to do copy this.
I will put it here and I will target to do list.
I will target this one.
So actually of the element, this is the parent, so I'm just going to target that one
and we it's going to be same unclad.
What are we going to change here only to do an.
Yeah, so we're going to change here to writing inside a console.
Let's see, do you pal clicked?
No, I'm going to go do something else as well.
I'm not going to show you, so I'm going to do it.
One more finding of the parent element and I'm going to grab this list wrapper class.
Right.
And I'm going to select it with the query selector and what's happening this.
OK, that shouldn't be there if you catch it.
Good on you.
So I'm going to say here at least wrapper, OK, that should be the class you can put in any class you
want.
But I just want to have some sense.
Right list.
Rapper rapper clicked.
Now I'm going to refresh here.
I'm going to delete everything.
And so when I click here you will see that look to do list element click this one fired up first and
after that these three as well.
But I didn't click them right.
I didn't target these to do list.
I didn't go through a list wrapper.
I didn't click any of this.
Right.
So now least at least Rahbar and that's why is there.
So yeah, that is pretty much it.
That is pretty much what is happening.
So this even goes up to its parents and that is called even bubbling.
And we need to stop it.
Right.
See how many things are fired with one click in.
That is was not my intention.
I just want this guy here when I click.
I just want to see this, not everything else that I've put on top.
So because this to do is and this list here that is hidden, you can't see it actually see it.
So this was to do list as wildfire in the least wrapper.
Right.
How cool is this?
OK, now we need to find a way how to stop it and we can stop it.
We using the event delegation.
OK, so I'm going to comment this.
We don't need it anymore.
Let's make it like this more so we can select more things.
Now, the event delegation, how are we going to do this?
So we are doing event delegation.
We have a couple of scenarios.
For example, when through JavaScript, through manipulation, through anything, I put I put new items
here in this ally in this you know, the list I put another list item.
Right.
If I do that with JavaScript, with through JavaScript, not coding it here, not coding in here, then
I need to use this event delegation.
The second thing is, if we have the same class name, for example, to many of the items that we want,
for example, to delete or to put some event listeners on, then only the first one will be selected.
For example, you will see what I'm trying to say.
So what I did say is that secondees is when we have same class names in more than one item in how is
this happening here?
It is this class FFA trash, it's pretty much everywhere.
Right.
And even this one is same in every area.
But we have one, two, three, four, five or.
Yeah.
How many others do we have.
Four.
Five.
Yeah.
Or four.
Four.
We have four allies so I have four same class names and that's not good enough.
Let me just show you what I'm trying to say here now.
I will say document.
Not like that document, that query selector, and what I'm going to select is this to do list trash,
just going to select this class here.
I'm just going to select this atrip element, write the link.
So, yeah, I'm going to do that.
And I'm going to add event listener and I'm going to say unclick and I'm going to put a function here
straight away.
Right.
We can we did have a couple of options.
We can do it like this or we can just write down the function.
Now I'm just going to say, cause a lot the trash item or link was plagued, OK?
Good.
So let me just show you inside our each element we did had that we did have that eyeglass, right?
We did.
So the thing is that we need to click the icon.
So I'm just going to go refresh this one.
And when I click here, nothing happens.
But by the way, we need to change something.
These aircrafts I'm holding out and I'm selecting all of them and I'm going to put hash because I don't
want them to go anywhere, because otherwise I need to put here event and prevent default because I
want to stop dealing to do its job and to submit somewhere to go somewhere.
Right now, I'm just going to refresh again.
So make sure that you're refreshing with and through whatever you do, because sometimes this takes
a while to work.
So if I click here, how cool is this?
It's working.
But if I click here, look, there is no no nothing, nothing showing that it's not working.
But if I click again here, there's mean that I click two times, three times for and that is because
I do have the same class name all over my to do list all over this in order to list.
I do have the same same class name.
So here when I highlighted it's the same same here.
No there is a way how we can stop this.
I'm just going to comment this one now we need to find what did I say in the event delegation.
We we so we target the parent in any parent doesn't have to be and we can stop this and we can delegate
this bubbling.
So I'm going to say here, more loose wrapper and I will be document that query selector and I'm going
to select the list of wrapper class, the entire thing that is holding this unordered list.
Right.
I'm just targeting this one.
So inside we have the entire notat least and we have this Ellyse.
OK, cool.
No Liz wrapper.
I'm just going to say query selecter.
Sorry, adding that listener so I can do it in one go.
But I just wanted to create the variable like this and I say click
in here, I'm going to create a function
so I'm not going to name the function outside.
Now here is what we want.
We want to find the child right.
So how we can find a child that we we want from this guy here, because this guy is the parent and I
want to find a child and I want to find actually this trash here.
OK, now, so if I do comes a lot easier.
Target, do you see what I'm missing?
I'm missing to pass this event here.
So e doctorial.
Let's see what's happening.
So when I click here, make sure that you do refresh this one.
You don't go anywhere like that.
OK, so it gives me these to do list L Clementino also if I click here it's going to give me that FFI
trash.
Oh yeah.
That is pretty much cool.
So we can see if.
Either target.
That last name.
OK, class name is equal equal to the FFA trash, not like that, it's not going to work otherwise.
So I'm going to say, OK, like this bad boy here, dargah else
council log you have missed, you have clicked outside already outside the trash, like, OK, that
was it.
So now I just want to say when I click on the trash, I can, I can, I want to see the result.
Otherwise I don't want to target anything.
Right.
So let me click here quick outside the trash I can hear is three times, four times.
But when I click here is actually I'm getting that one.
So that is pretty much it.
What we also can do, we can get the parent right, OK, like we can get variable parent, we can get
the parent of this trash because sometimes we need the parents, sometimes we need all of these things.
So either target the parent node and console like the parent.
Right.
OK, let's see what's happening here.
So when I click here.
OK, so the parent node, is this actually a traveling, which is true.
Right, this AI class I'm just going to show you with for better visualization or this one here is a
man.
So this icon here is inside is Aytaroun.
Now, most of the times we do have here I.
D right.
Unique ideas like I'm going to say here, I'm going to give it idy here and I'm going to say ID or one
like that.
I'm just going to put it here.
I'm going to say down two, not three.
I'm seeing one.
I'm putting something else here, I need my coffee immediately.
So therefore.
Right, so sometimes you need to get these ideas and how you can get these ideas is very simple.
You can just type the idea and that's pretty much here.
Now, just kind of refresh refresh here.
OK, so when I click here, I just expect to have this though, and this one is coming from the other
comes along.
So if I click here, I have this, there are four.
So now I can do whatever I want.
Right.
And sometimes when we want to remove this entire block, let me just let me just show you.
So when we want to put the entire block, we don't need this pan.
We don't need these eight traveling, but we need this entire to do list element and how we can do this
simple.
We don't have any ideas here.
Right.
We don't have anything to find because based on the idea, you can just search it and you can delete
it.
But now what I can do, I'm just going to commandeers all of this.
First I need to copy.
Then I'm going to say VAR Aaron and I'm going to say parent parent.
I'm going to go one step above and give me the other parent node.
So this, this one will give me the other parent know and this is the entire to do list.
I can OK just going to comes along here, just refresh.
So when I click go to the console.
When I click here, here it is.
It's giving me the entire when I click here.
I've missed the icon by the way.
It's going to give me that one.
OK, so now it's easy.
I do have this entire allai so I can remove it.
Right.
So what I need to do is just to have that remove as pretty much basically it.
Now we were able to remove the item from the graphical user interface.
But let me just say, clicking on the icon here, it's remove let's click the first one.
That's it.
The last one in.
Here we go.
That is pretty much it, ladies and gentlemen.
So we have event bubley that even bubbles through the DOM.
If we don't catch it in, how are we going to catch it?
If we use even delegation location where we put the delegation, we put it on the parent like this right
on the list wrapper, and after that we finding the target that we want and that is what we are going
to use in our project in future.
And that project will be about burning calories.
We're going to use some similar we're not going to use the same tactic, but we're going to use this
event babblings.
So bubbling and delegation.
So make sure that you understand now, because when we're going to do that, you're not going to be
able to understand how we managed to come to delete calories from that budget.
So thank you very much.
I hope you enjoy it now.
We'll see you in the next one.