So then there's one last thing I'd like to talk about when it comes to events, and that is event bubbling.
Now, this is one of those things that you could quite easily turn a blind eye to when you're learning
JavaScript, but then it will trip you up somewhere along the line, so it's best that we learn it now.
So then when an event occurs, like a click or whatever element we click, that element becomes the
event target.
We've seen this via the E dot target down here.
So for example, when we click on an ally, if I refresh this, when I click on one of these allies,
one of those ally tags becomes the event target.
Now, when this happens, JavaScript will look to see if we have any event listeners attached to this
element and fire the callback for it.
If we do.
And we've seen that over here because we attach an event listener to each ally tag when the page loads
so it fires that callback function for that element if there is an event listener attached to it.
Now that's not the end of the story right there.
That event then bubbles up the Dom from the event target to its parent, which in this case is the Ul.
Now JavaScript will look to see if we have an event listener attached to this element and it will fire
the callback function of that listener.
If we do, then the event bubbles up and it goes to the next parent and so forth.
And this is called Event Bubbling.
The event starts at the event Target.
Then it bubbles up to parents to see if there's any event listeners attached to those two.
And if there is, then it's going to fire the callback function for those event listeners as well.
Okay, so this is called event bubbling and event bubbling is important to understand because imagine
this scenario.
Imagine we have a click event on this parent right here, the Ul to do something or other.
Now, when we click on the child an li tag, if we have an event listener attached to this, then it's
going to fire that callback function.
But then the event is firing up to the Ul and we have an event listener attached to that and that is
a click event for something else.
Maybe we click to the left of the Ul or something like that.
But either way, when we click on an Li, the event is going to bubble up and it's going to fire the
callback function attached to this event listener and we might not want that to happen.
So let's see this in action.
I'm going to go back over here to our code and we can see we already have an event listener set up on
each li tag.
Now I'm also going to set up an event listener to the Ul tag as well.
We already have a reference to that Ul up here, so I'm going to now say Ul dot add event listener for
a click event and we'll fire a callback function.
Now I'm going to take in the event parameter because we'll use that later.
But what I'll do for now is I'll just say console, dot log and event in Ul.
Just so we know when this callback function fires that this is coming from the Ul event listener.
Now up here, what I'm going to do when we add an event listener to the Li tags, I'm going to just
console dot log event in Li so we know the difference between these two callback functions when they
fire.
So let's change this to li like so.
Okay then.
So now if we click on an li tag, then go to the console.
We can see over here it disappears.
But first of all, we see events in Ally, then we see events in Ul.
So this is events bubbling in action.
First of all, the callback function attached to the event listener to the Li fires.
Then the callback function associated with the event listener on the Ul fires because the event bubbles
up and it fires this first, then this.
So if we wanted to, what we could do at this point, if we didn't want this to fire, we could stop
the event from bubbling up.
And we do that via a method called stop propagation on the event object.
So what we could say is e dot stop propagation like so.
And that is going to stop the event bubbling up from this point.
So if I save it there, then come over to the console, click one of these.
Now we only see events in Ally because when the callback function fires for this, we reach this stop
propagation method and it stops the event bubbling up any more to the parent.
Okay, so that's important to understand.
Otherwise you might get some unexpected behavior when you're working with event listeners.
Now another thing closely related to event bubbling is event delegation, which can be really useful
when we need to attach event listeners to many different elements.
Like these lies right here.
Remember, we need to attach an event listener to each one of these.
Now, if there were many Li tags on the page, we'd have to do this for each li tag.
So that could start to affect the performance of our.
Program.
And it's not great practice because it's a costly thing to attach event listeners to a lot of things.
And also when we've seen we've added new to Dos.
Event listeners and not attached to these new allies.
So we'd also have to attach new event listeners to these new allies every time we add a new ally to
the Dom.
So there is a better way to do this so that we're not attaching an event listener to loads of different
elements.
And also it's going to work when we add new allies to the Dom as well.
So what I'm going to do is first of all, I'm going to comment out all of this stuff where we get all
of the tags and we attach an event listener to each one.
And instead I'm just going to attach a single event listener to the Ul.
Now I'll comment out this console log right here, but instead what I want to do is inside this event
listener, inside this callback function, try and find out what thing was initially clicked.
And remember, we can do that by using E dot target.
So let me first of all console dot log e dot target and save that.
So what's going to happen now is we're going to click on an li tag.
Now we don't anymore have an event listener attached to those allied tags so no callback function is
going to fire.
However, the event is then going to bubble up to the Ul and we have an event listener attached to the
Ul.
So this callback function is going to fire for that Ul and then inside it we're going to console dot
log the event target.
So that is the element that was initially clicked, which should be an Li tag.
So let's have a look at this.
Let's go to the browser and the console and click on one of these.
So if I click on this, we can see it fires this, which is the target, the event target.
So we're still recognizing which individual li we're clicking, but we're now not attaching an event
listener to each one of these tags individually.
We're just doing it to the single Ul over here.
Then when we click anywhere inside that any one of these tags, the event bubbles up and we can see
which li tag was clicked.
Now it's also going to work for these new todos over here because again, we're not attaching the event
listener to the allies anymore.
So it doesn't matter that these new Li tags don't have event listeners.
What matters is that we're clicking them and the event bubbles up to the Ul, which we do have an event
listener attached to.
So when we click on one of these new ones, now we can see the target and these work.
So that is awesome.
And we're doing all this with just one event listener.
So then what we're going to do now inside here, we want to delete one of the tags, the li tag that
we click.
So what we want to do is check in here.
When we click something inside the Ul is the event target.
Is that an Li tag?
Now, we can do that by using this target thing.
So I'm just going to log out E for now.
Then I'm going to save it.
And if we click on one of these and expand and we go down to Target, if we expand this target property,
we can see it also has a property inside that.
And that property is called tag name, if I can reach it.
There's loads of stuff in here, so let's come down here.
We can see tag name.
So what we want to check is, is the event target, Does that have a tag name of Li?
Because if it does, then we want to delete something.
If it doesn't, it means we probably clicked somewhere inside one of these little gaps and not on an
li tag.
But the Ul callback function is still firing because it's still bubbling up to the Ul and we've still
clicked on the Ul.
So then what we're going to do is check if the tag name is Lee.
So let me do a little if check right here.
I'm going to say if Event.target dot tag name is equal to Lee, it's in capitals.
That's how the Dom represents these in the tag name property.
So if that's the case, it means we've clicked on an lee tag.
And what we want to do in this case is take that Lee, tag the target and we want to remove it.
So let's copy that and say e dot target, dot remove.
Oops, not in capitals, remove symbol.
So now when we click on Lee tag, it's going to bubble up to the Ul.
It's going to fire this function.
It's going to check if the tag name that we clicked on on the target is in fact an ally.
If it is, it's going to take that Lee via E dot target and it's going to remove it from the Dom.
So let's save it and check if this works in the browser.
If we click one of these, it deletes them.
If we add some new to Dos and then click on those, it also deletes those as well.
So there we go, my friends.
That is event bubbling and also an offshoot of that event delegation which can be very useful in scenarios
like this.
