WEBVTT 00:02.220 --> 00:08.850 We already know what an event listner is and how it works, and now I'm going to consider a bit advanced 00:08.850 --> 00:10.630 stuff regarding event listeners. 00:11.940 --> 00:13.410 Let's go back to Brackett's. 00:14.370 --> 00:20.310 When we talked about functions inside an event listener, you remember that there were two ways. 00:20.700 --> 00:26.070 The first was to pass anonymous function as a parameter, and the second way was to create function 00:26.070 --> 00:30.810 outside element listener and then pass the function inside it as a parameter. 00:31.560 --> 00:37.380 But you might notice that in both ways we could not pass the arguments for those functions. 00:38.190 --> 00:46.230 In order to do that, we can use a little tweak, which is a very simple let's use this code from previous 00:46.230 --> 00:46.730 lecture. 00:47.490 --> 00:57.300 And at first I want to pass parameters inside the function A so right your X and Y after that inside 00:57.300 --> 00:58.230 cancel that log. 00:58.710 --> 01:02.820 Right, for example, X multiplied to Y. 01:03.420 --> 01:08.340 Then in order to pass the arguments, we need to use anonymous function. 01:09.120 --> 01:13.670 And in that anonymous function we need to call function A with arguments. 01:14.250 --> 01:17.700 So right here instead of a function. 01:21.950 --> 01:34.160 And then in all function a right, a antipasti arguments, for example, five and 10 reloads, then 01:34.160 --> 01:38.190 click on Harding and you see that we have 50 in council. 01:40.130 --> 01:46.790 OK, so generally at Limitlessness doesn't allow us to pass arguments inside functions, but if you 01:46.790 --> 01:48.950 need it, you can use this simple trick. 01:50.330 --> 01:57.260 OK, now I'm going to talk about another important thing regarding events, which is called Evenflo. 01:58.370 --> 02:01.340 Let's first let's take a look on indexable extremophile. 02:03.500 --> 02:11.690 You see here that we have developments, which is a rapper, it contains all the elements and if we 02:11.690 --> 02:18.170 attach an event listener to that element, then click on any element inside this live, the event will 02:18.170 --> 02:18.740 be fired. 02:20.390 --> 02:27.350 Suppose that another listener is attached to had the element which is inside development and also another 02:27.350 --> 02:29.780 one is attached to H2, had an element. 02:30.980 --> 02:35.930 Then what will be the sequence of events when we click on H2 element? 02:36.560 --> 02:42.620 It's interesting because when we click on Ista Element, it automatically means that we click on header 02:42.620 --> 02:43.770 and div as well. 02:44.810 --> 02:45.850 Let's see what happens. 02:46.760 --> 02:51.110 Go back to script dodgiest file and remove these codes. 02:53.330 --> 03:07.820 I first the mentioned elements, so create variable def equals document dot query selector, then right 03:07.820 --> 03:11.780 def dot tarapur because it has the class name repr. 03:14.910 --> 03:18.990 Then we need to select the element, so create the variable of our header. 03:20.980 --> 03:24.820 Equals document dot querrey selecter. 03:27.640 --> 03:28.900 And right here, Heather. 03:31.840 --> 03:38.920 And the third one, which we want to selectees, H2, had elements of our H2 equals document. 03:41.660 --> 03:42.890 Dr. Gregory Selecter. 03:45.740 --> 03:46.820 Had to. 03:49.260 --> 03:54.100 OK, after that, attached to each of these elements, add event listeners. 03:54.720 --> 04:02.910 So let's talk from def right def dot at event listener than past the click event. 04:02.910 --> 04:03.690 Right click. 04:06.520 --> 04:09.200 Then the second parameter function. 04:13.790 --> 04:16.790 And inside the collaborationists ride Castle, good luck. 04:19.990 --> 04:20.920 From Steve. 04:24.390 --> 04:27.540 Now I'm going to copy it and paste twice. 04:29.790 --> 04:33.560 Then change deep into Heather, right, Heather? 04:36.470 --> 04:46.610 And also inside the castle, right from Heather and then below, right instead of the H2 element. 04:49.420 --> 04:52.510 And again, he castle that log right from age to. 04:56.150 --> 05:05.240 Reload, then click on H2 elements and you see that the sequence is following the event, firing started 05:05.240 --> 05:12.920 from inner elements at the first event was fired for H2 elements, therefore header and then four deep. 05:15.230 --> 05:20.240 In order to make our example clearer, let's add some features for each function. 05:22.430 --> 05:25.730 DeLay each function execution for a second four. 05:25.730 --> 05:28.250 That creates variable delay. 05:30.830 --> 05:35.810 And then use one of the methods of date object, which is get time. 05:36.710 --> 05:42.710 This method returns total amount of milliseconds from 1970. 05:45.590 --> 05:47.210 So right now to date. 05:49.200 --> 05:51.280 And then use get time method. 05:51.510 --> 06:02.610 Don't get time, and now we need to add to that thousand milliseconds after it's I'm going to use a 06:02.610 --> 06:09.630 while loop, which will have the following condition right while and inside the parentheses. 06:09.960 --> 06:10.380 Right. 06:10.830 --> 06:11.580 New date. 06:14.900 --> 06:16.460 Is less than delay. 06:18.520 --> 06:22.060 OK, so what does this two lines mean? 06:23.120 --> 06:32.150 When the function is executed, then why Loop gives us one second, because the condition inside it 06:32.150 --> 06:34.020 will become false in one second. 06:34.340 --> 06:42.320 The reason of this fact is that current time is less than delay with one second, let's copy those lines 06:42.320 --> 06:44.690 and paste for the rest of the functions. 06:48.940 --> 06:53.470 Then reload, click on heading. 06:56.440 --> 07:01.210 And you see clearly what is the sequence of events firing in this case? 07:03.160 --> 07:12.220 So sequence of even firing from in your element to outer is called even bubbling, and it is the default 07:12.220 --> 07:18.730 behavior, as you remember from previous videos that we're talking about, the third parameter of elementalist 07:18.760 --> 07:23.190 method, which is a boolean value and is optional. 07:24.130 --> 07:32.350 You see that here we don't have this parameter, but if we write false for each at event listeners. 07:35.120 --> 07:45.770 Then reload and click, you see that nothing is changed, we have the exact same result. 07:46.460 --> 07:52.040 That's because at event listener has faults for the third parameter as a default. 07:53.540 --> 07:56.210 But if we change falls into true. 08:01.350 --> 08:11.310 Then again, reload, click, and you see that we have an opposite result, the sequence of even firing 08:11.310 --> 08:13.470 is from outer elements to inner. 08:14.370 --> 08:16.610 This is called event capturing. 08:18.120 --> 08:24.270 So remember that when the sequence of events firing is from in order to alter, it's called event public 08:24.720 --> 08:28.740 and in case of from outer to inner, it's called event capturing. 08:29.490 --> 08:33.580 And you can manage it using a third parameter, which is a boolean value. 08:35.190 --> 08:35.700 All right. 08:36.450 --> 08:42.180 Before we finish talking about events, I want to show you how they actually work behind the scenes. 08:43.110 --> 08:52.290 So let's comments this could out and then grab a few elements and also at event listener. 08:58.190 --> 09:03.620 Then change the text in council, right from Cleek event. 09:07.010 --> 09:08.600 Then create a function A. 09:11.480 --> 09:15.590 And inside the cooler breezes, right, Castle, that log. 09:18.860 --> 09:20.090 From function eight. 09:24.690 --> 09:34.170 Then cut these lines of code in order to delay execution of codes for three seconds and paste them inside, 09:34.170 --> 09:40.830 function a then change thousand into three thousand. 09:42.160 --> 09:43.510 Then call this function. 09:46.900 --> 09:49.240 And after that, below, right, consider log. 09:51.820 --> 09:53.740 Global code is executed. 09:57.050 --> 09:58.940 So when I reload the page. 10:00.750 --> 10:06.930 The execution of function eight will be delayed for three seconds, and during these three seconds, 10:06.930 --> 10:10.840 I will click on two elements and let's see what happens. 10:11.430 --> 10:16.290 So reload and click a couple of times. 10:20.170 --> 10:27.940 And you see that we have front function, a then global code is executed and from click event. 10:29.650 --> 10:33.860 So what happens when we reload the page? 10:34.030 --> 10:36.220 Global execution context is created. 10:37.810 --> 10:42.190 Then Function A creates its local execution context. 10:43.120 --> 10:50.740 And actually during execution of function A, we have clicked on adding elements, but the function 10:50.740 --> 10:53.400 inside adamant listner did not start execution. 10:54.100 --> 10:56.200 It is waiting until function. 10:56.200 --> 11:03.290 A finish is execution and then global cult after that was the function inside event listener. 11:04.810 --> 11:11.920 So it means that at first JavaScript engine executes of the codes and after that it waits for events. 11:14.860 --> 11:18.340 All right, that was all about events. 11:18.760 --> 11:19.900 See you in the next video.