1
00:00:01,610 --> 00:00:02,840
This video in the next couple.

2
00:00:02,870 --> 00:00:08,570
Are going to cover a couple of strange topics, so to speak, around react in some basic DARM stuff.

3
00:00:09,140 --> 00:00:12,950
So in this video in particular, I'm going to show you a quick diagram and just make sure you understand

4
00:00:13,010 --> 00:00:18,470
a really fundamental topic around events inside the browser or specifically around DOM elements.

5
00:00:18,950 --> 00:00:21,320
So this is not a react specific topic.

6
00:00:21,590 --> 00:00:22,460
I'm about to tell you about.

7
00:00:22,760 --> 00:00:25,850
This is just how the browser works and how the DOM works.

8
00:00:26,750 --> 00:00:26,960
OK.

9
00:00:27,050 --> 00:00:31,550
So once again, HGL structure, I've changed this one up a little bit and just added in a couple more

10
00:00:31,550 --> 00:00:32,090
elements.

11
00:00:32,750 --> 00:00:34,220
Now here's the dropdown again.

12
00:00:34,280 --> 00:00:37,100
The dropdown does not actually create an element for itself in the DOM.

13
00:00:37,130 --> 00:00:38,750
I only put it here for reference sake.

14
00:00:39,380 --> 00:00:44,180
Inside the dropdown, we've got to do with UI form a did with UI selection as a class name and a couple

15
00:00:44,180 --> 00:00:45,350
of other class names on there.

16
00:00:45,770 --> 00:00:47,150
That's really this one right here.

17
00:00:47,930 --> 00:00:50,300
And then eventually we've got a div with class item.

18
00:00:50,390 --> 00:00:51,380
Another item right there.

19
00:00:51,650 --> 00:00:54,370
Those represent the individual options that a user can click on.

20
00:00:56,770 --> 00:01:02,680
So on this day, right here in this one, those two options, we associated a click event handler.

21
00:01:03,020 --> 00:01:04,930
And we can see that very easily inside of our code.

22
00:01:05,920 --> 00:01:07,540
When we built up rendered options.

23
00:01:08,090 --> 00:01:09,460
But there's the div with class item.

24
00:01:10,430 --> 00:01:16,040
We are making multiple of these elements and each one of them that we create has an on click event handler.

25
00:01:17,190 --> 00:01:21,900
If we also go back down to the d'Hiv with class UI selection, there's an event handler on that one

26
00:01:21,900 --> 00:01:22,260
as well.

27
00:01:22,710 --> 00:01:26,250
And so I've represented those event handlers by these green boxes.

28
00:01:27,160 --> 00:01:28,350
So what's relevant here?

29
00:01:28,530 --> 00:01:29,110
Well, own it.

30
00:01:29,130 --> 00:01:33,600
Make sure you understand a topic around the domme called Event Bubbling.

31
00:01:34,350 --> 00:01:39,060
I want you to get a better understanding of what goes on behind the scenes when a user clicks on, say,

32
00:01:39,060 --> 00:01:40,260
this item or this item.

33
00:01:41,910 --> 00:01:46,740
So we're gonna imagine for a second that a user clicks on this item right here, these are clicks on

34
00:01:46,740 --> 00:01:46,890
it.

35
00:01:47,220 --> 00:01:54,090
The browser itself then creates an event object, the event object describes and information about the

36
00:01:54,090 --> 00:01:54,510
click.

37
00:01:54,930 --> 00:02:00,570
So, for example, where the user's mouse was is on the screen and what element the user just clicked

38
00:02:00,570 --> 00:02:07,260
on the browser, then hands that even object off to react, react as a little bit of processing on that

39
00:02:07,260 --> 00:02:09,420
event and then provides an event.

40
00:02:09,480 --> 00:02:11,970
Object to our on Click event handler.

41
00:02:12,930 --> 00:02:14,190
So unclick right there.

42
00:02:14,210 --> 00:02:17,520
Gets invoked and the first argument to it is an event object.

43
00:02:19,330 --> 00:02:22,030
That would be this one right here.

44
00:02:24,590 --> 00:02:28,880
Now, here's the key thing to understand, and this is where the term event bubbling comes from.

45
00:02:29,450 --> 00:02:33,500
Whenever a user clicks on that element, the event does not stop there.

46
00:02:34,010 --> 00:02:38,990
Instead, this event object then travels up to the next parent element.

47
00:02:39,080 --> 00:02:41,300
So the parent element to that day right there.

48
00:02:41,390 --> 00:02:43,820
In this case, it is a div with class name UI menu.

49
00:02:44,750 --> 00:02:49,130
If that element has a click event handler on it, it is automatically invoked.

50
00:02:50,160 --> 00:02:55,050
Even object then goes up to the next parian element in this case, it is the div with the class of UI

51
00:02:55,050 --> 00:02:55,590
selection.

52
00:02:56,190 --> 00:03:00,480
If that element has an unclick even Anjelah, it is also invoked with as an object.

53
00:03:01,240 --> 00:03:05,100
And then the event travels up to all these successive parent elements.

54
00:03:05,480 --> 00:03:10,200
And in every step the browser checks to see if that element has a click event handler.

55
00:03:10,590 --> 00:03:12,930
If it does, it is invoked automatically.

56
00:03:14,280 --> 00:03:16,440
So, again, this is referred to as event bubbling.

57
00:03:16,770 --> 00:03:22,620
So we would say that this event is kind of bubbling up or kind of rising up our event structure or our

58
00:03:22,620 --> 00:03:23,370
dam structure.

59
00:03:24,460 --> 00:03:30,280
We can see this extremely easily by just taking a look at the current behavior of our drop down component.

60
00:03:31,000 --> 00:03:34,000
Think about what happens when a user clicks on when these items right now.

61
00:03:34,630 --> 00:03:39,070
Whenever user clicks on one, the items, we only update the currently selected item.

62
00:03:39,250 --> 00:03:43,960
There is nothing inside of our code right now that says around clicking this item that we should close

63
00:03:43,960 --> 00:03:44,560
the dropdown.

64
00:03:44,840 --> 00:03:45,070
Right.

65
00:03:45,100 --> 00:03:45,700
There's nothing inside.

66
00:03:45,790 --> 00:03:49,600
I don't see anything inside of here that says, oh, yeah, go ahead and try to close the dropdown.

67
00:03:50,200 --> 00:03:54,070
Yet nonetheless, whenever we click on an element, the dropdown closes.

68
00:03:54,340 --> 00:03:54,940
So why is that?

69
00:03:55,660 --> 00:03:57,970
Well, it is because the user is clicking on this div right here.

70
00:03:58,630 --> 00:03:59,800
We run that on click.

71
00:03:59,980 --> 00:04:05,530
We update the currently selected item, the event and bubbles up, goes to the div with class of UI

72
00:04:05,530 --> 00:04:08,170
selection, which does have an on click function tied to it.

73
00:04:09,560 --> 00:04:10,970
That is this one right here.

74
00:04:11,810 --> 00:04:14,030
That unclick right there is executed.

75
00:04:14,210 --> 00:04:18,560
And we update our open piece of state, which causes the dropdown to close.

76
00:04:19,540 --> 00:04:24,320
So we can very easily see event bubbling in action inside of our react up right now.

77
00:04:25,460 --> 00:04:29,390
OK, so that is just a little bit of background on even bubbling to now.

78
00:04:29,480 --> 00:04:30,380
Why is that relevant?

79
00:04:30,770 --> 00:04:33,770
Well, of course, that's we're going to discuss in the next video.