1
00:00:02,280 --> 00:00:05,370
So prevent default is a very important method

2
00:00:05,370 --> 00:00:10,650
on the event object which you can use to control what the browser does with that event.

3
00:00:10,650 --> 00:00:16,110
We also got another important method for which we first of all need to understand how exactly the event

4
00:00:16,140 --> 00:00:17,150
behaves.

5
00:00:17,250 --> 00:00:24,960
Our events in Javascript, in browser side Javascript have two phases through which they run essentially

6
00:00:25,170 --> 00:00:29,700
and where they then trigger your event listeners, a bubbling and a capturing phase.

7
00:00:29,700 --> 00:00:32,810
Let's say we have a button in a div which is in a section,

8
00:00:32,920 --> 00:00:35,150
this could be the markup we have.

9
00:00:35,490 --> 00:00:37,620
Now we click that button here,

10
00:00:37,840 --> 00:00:44,400
now what actually happens is that the browser runs through two phases where it checks for listeners

11
00:00:44,400 --> 00:00:45,510
to that event.

12
00:00:45,510 --> 00:00:49,470
First, it runs through a phase which is called the capturing phase,

13
00:00:49,470 --> 00:00:53,640
second it runs through a phase which is called the bubbling phase.

14
00:00:53,640 --> 00:00:58,320
Now the capturing phase goes from outside to inside,

15
00:00:58,320 --> 00:01:00,050
now what does this mean?

16
00:01:00,300 --> 00:01:07,500
It's important to understand that a click event on such a nested button here cannot just be listened

17
00:01:07,530 --> 00:01:14,160
to with event listeners on the button but for example also with an event listener on that section

18
00:01:14,910 --> 00:01:17,160
and the browser during the capturing phase

19
00:01:17,170 --> 00:01:23,790
checks if you got a capturing event listener on let's say the section registered which would then actually

20
00:01:23,790 --> 00:01:29,970
run its function before any event listeners registered on the button because it's from outside to inside

21
00:01:29,970 --> 00:01:33,720
in the capturing phase and the section is outside of the button.

22
00:01:33,720 --> 00:01:36,330
The bubbling phase on the other hand does the opposite,

23
00:01:36,330 --> 00:01:38,800
it goes from inside to outside.

24
00:01:38,850 --> 00:01:45,240
Now all event listeners you add with add event listener are by default registered in that bubbling phase

25
00:01:45,270 --> 00:01:50,370
which means if we have an event listener on the button and on the section, the button event listener will

26
00:01:50,370 --> 00:01:53,340
run first, the section event listener will run second.

27
00:01:53,820 --> 00:01:59,220
We can change this and we can also do interesting things with that bubbling and capturing behavior as

28
00:01:59,220 --> 00:02:00,690
I will show you in the next lectures.