This video in the next couple.
Are going to cover a couple of strange topics, so to speak, around react in some basic DARM stuff.
So in this video in particular, I'm going to show you a quick diagram and just make sure you understand
a really fundamental topic around events inside the browser or specifically around DOM elements.
So this is not a react specific topic.
I'm about to tell you about.
This is just how the browser works and how the DOM works.
OK.
So once again, HGL structure, I've changed this one up a little bit and just added in a couple more
elements.
Now here's the dropdown again.
The dropdown does not actually create an element for itself in the DOM.
I only put it here for reference sake.
Inside the dropdown, we've got to do with UI form a did with UI selection as a class name and a couple
of other class names on there.
That's really this one right here.
And then eventually we've got a div with class item.
Another item right there.
Those represent the individual options that a user can click on.
So on this day, right here in this one, those two options, we associated a click event handler.
And we can see that very easily inside of our code.
When we built up rendered options.
But there's the div with class item.
We are making multiple of these elements and each one of them that we create has an on click event handler.
If we also go back down to the d'Hiv with class UI selection, there's an event handler on that one
as well.
And so I've represented those event handlers by these green boxes.
So what's relevant here?
Well, own it.
Make sure you understand a topic around the domme called Event Bubbling.
I want you to get a better understanding of what goes on behind the scenes when a user clicks on, say,
this item or this item.
So we're gonna imagine for a second that a user clicks on this item right here, these are clicks on
it.
The browser itself then creates an event object, the event object describes and information about the
click.
So, for example, where the user's mouse was is on the screen and what element the user just clicked
on the browser, then hands that even object off to react, react as a little bit of processing on that
event and then provides an event.
Object to our on Click event handler.
So unclick right there.
Gets invoked and the first argument to it is an event object.
That would be this one right here.
Now, here's the key thing to understand, and this is where the term event bubbling comes from.
Whenever a user clicks on that element, the event does not stop there.
Instead, this event object then travels up to the next parent element.
So the parent element to that day right there.
In this case, it is a div with class name UI menu.
If that element has a click event handler on it, it is automatically invoked.
Even object then goes up to the next parian element in this case, it is the div with the class of UI
selection.
If that element has an unclick even Anjelah, it is also invoked with as an object.
And then the event travels up to all these successive parent elements.
And in every step the browser checks to see if that element has a click event handler.
If it does, it is invoked automatically.
So, again, this is referred to as event bubbling.
So we would say that this event is kind of bubbling up or kind of rising up our event structure or our
dam structure.
We can see this extremely easily by just taking a look at the current behavior of our drop down component.
Think about what happens when a user clicks on when these items right now.
Whenever user clicks on one, the items, we only update the currently selected item.
There is nothing inside of our code right now that says around clicking this item that we should close
the dropdown.
Right.
There's nothing inside.
I don't see anything inside of here that says, oh, yeah, go ahead and try to close the dropdown.
Yet nonetheless, whenever we click on an element, the dropdown closes.
So why is that?
Well, it is because the user is clicking on this div right here.
We run that on click.
We update the currently selected item, the event and bubbles up, goes to the div with class of UI
selection, which does have an on click function tied to it.
That is this one right here.
That unclick right there is executed.
And we update our open piece of state, which causes the dropdown to close.
So we can very easily see event bubbling in action inside of our react up right now.
OK, so that is just a little bit of background on even bubbling to now.
Why is that relevant?
Well, of course, that's we're going to discuss in the next video.