Hey, this is going to be a short bonus lesson on bubbling and capturing, we talked about it a little
bit earlier.
Well, we have our event handling that.
We have an option to do true or false.
And this lesson will give you a little bit more of an illustration of how it works.
So by default, you don't have to include it anymore.
You did have to before and by default will go to false.
And it only really makes a difference when you have two events on the same element.
So there might be a case where you've attached an event listener to the parent, but then the children
also have events as well.
And when you are adding these event listeners, you have the option to capture or bubble.
So the difference between Katcher and bubble bubbling is the event is first captured and handled by
the innermost element and then propagated to the outer elements in capturing is the opposite, where
the event is first captured by the outermost element and propagated to the inner element.
So what we're going to do in this lesson is show up, show you how you can set this up and how you can
explore a little bit more about how it works.
So creating an event later on, elements are going to create a bunch of divs.
These debates are going to be inside each other.
And as you can see, five is inside of four, which is inside a three, which is inside a two, which
is inside of one.
So all these elements are going to be contained within each other and they're also going to have event
listeners.
So that's going to have multiple event listeners on the same events.
And I show you how it gets handled using the bubbling and capturing.
So the code snippet is this one here where we've got all of the device and as we can see, the device
one is inside or one is the main parent and then the next device inside, next one inside, inside,
inside.
And then we close off all the device and we've got section ID where we've got some output.
So this is where we can track what's happening with the bubbling.
We select all of the elements and we loop through.
We add event listeners, so we add one capture, one bubble, and that's where we've got the function
names.
So they can be named anything, of course, because they're just functions and one is set to true and
one is set to false.
So that's the big difference here.
That true and false, and this will clearly illustrate what the difference is.
So let's try this out and open up our editors and create a fresh document.
We're going to create all the different diffs.
So we've got our first div and within here we're just going to have a value of one.
Inside of that one, we're going to have another div and this one will have a value of two.
And then inside of this div will have another div and this one will have a value of three.
So I'm not sure really the best way to kind of output this in the HTML, but we have another div inside
of here and I know it's kind of getting a little bit tight here on the screen.
So we've got four and then we have another div and this one is five.
So let me do a quick clean up of this so you can see it a little bit better.
When we refresh it.
All we see is one, two, three, four, five, because of course the device don't have any content
in it as of yet.
We're also going to create another area that we can create an output so we can call this one, give
this one a section tag so that we don't get mistaken for the device.
And this is going to be the only section tags we don't actually even have to give an ID.
I'm going to just add the JavaScript in page.
So right on this index page or just have the JavaScript on the page itself.
So selecting the elements is the first thing that we want to do.
So we've got our output elements and that should be const output elements.
And then this is where we're going to select that element.
We can use documents, query selector and we're going to select it by TAG and we have only one section
so we can select that really easily.
The other one, we need to select all of the elements.
So just call it El's and documents using query selector all.
So we're going to select all of the devs on the page so we can add all of the event listeners to that.
Next, we're going to do a for loop and looping through.
Letting X or Y equals zero and then looping through while ls length is less than I and will increment
I by one, so we have a way out of our loop.
And this is we're going to add all of the event listeners.
But before we add event listeners, I want to actually add in some styles to these elements.
A lot of times what I'll do is I'll set up a variable, so I'll call it L. And then within here I'll
have Elles.
So it looks a little bit cleaner when you do it this way.
So now I can just reference the object as well.
And we've got style and then border.
So one pick solid red so that we can distinguish between all the different diffs.
Also, El, it's always good practice to try adding in some styling.
And of course I could have done this with scissors, but we do want to focus on JavaScript.
So therefore a great way to practice JavaScript another style, add in some padding and this actually
should be, I guess, not incrementing.
So that's why it's only adding it to the one.
So now we have something way more interesting and we see that we've got the same pattern that we were
looking at within the example we can also set because this is an object so we can set values to it so
we can have AI plus one.
So that means that each one of these elements is now going to have kind of a hidden value there.
We could also call it secret or something like that to make it more interesting.
Adding an event listener event that we're listening for is a click.
So this is going to be for the catcher.
So make sure that you set this one to true and the other one is going to be for the bubble and calling
in the function bubble and make sure you set this one to false.
Otherwise, it won't work.
So we've got our event listeners.
And next, we need to create our functions.
So we've got one function called bubble and then we have another function called capture.
And within these functions, we're just going to update the output and I'll create a function in order
to handle the output as well.
So function we can call it output.
It will take in value of message.
And then with that message value, it's going to take the output element that we have on the pick and
update the inner HTML with whatever content.
So just add to that just a quick short format there and using a template, literal adding in the value
of the variable message.
And we can do a line break as well.
And of course then the back.
So ready to add in content into the message.
So do a quick refresh, make sure there's no errors.
So now we can output to the output function a message, some information, and in this case we're going
to call it capture.
And then the contents of what we're capturing is whatever is contained within this V so that's that
value that we're set there.
That's how we're just getting whatever value that's contained within there.
We could also take the inter text as well if we wanted to.
And actually this one should be bubble and this one is capture.
So I just got them back.
So I'll update that to be bubble and that one is capture.
So let's try this and see what happens now.
Whenever I click, you see that when I click on FI, what we're getting for capture.
So we get all of the captures run.
So starting at 1:00, so it starts at the outermost element and moves towards the innermost element,
whereas the bubble starts at five over here and it goes through all the elements ending at one.
So if we click one, we're only going to see one because one is it's also the outer and the inner.
So that's why it doesn't really make any difference if you've only got the one event.
But if we click number two, we're going to have two different events.
So let me refresh that and I'll make the smaller I have it zoomed in quite a bit.
So if I click two, you're going to see that on the capture.
We're starting out one, two, and on the bubble we're doing two one.
So that's the way that bubble and capture works.
So let's take a little bit time to get used to it.
And it is only really important now if you are adding multiple event listeners to the same element.
So go ahead and try this out.