WEBVTT 00:00.670 --> 00:06.940 All right, we are back and let's continue talking about events in JavaScript, as I said in previous 00:06.940 --> 00:10.810 video, I'm going to consider JavaScript event listeners in this lecture. 00:11.620 --> 00:13.990 So what is an ADD event, listeners? 00:14.560 --> 00:18.760 It is a method that attaches and even handler to the specified element. 00:19.390 --> 00:23.290 And it does this without overwriting the existing event handlers. 00:23.950 --> 00:27.700 You're able to attach as many, even handlers, to one element as you want. 00:28.900 --> 00:29.350 All right. 00:29.950 --> 00:31.810 Let's go back to our text editor. 00:33.040 --> 00:40.780 Get rid of these coats, except the first line, because I'm going to use again the heading H2 element, 00:41.380 --> 00:48.400 then go to index DOT extremophile and remove the even attributes as well from H2 Haddington because 00:48.910 --> 00:50.410 we don't need them anymore. 00:52.190 --> 00:59.860 OK, so now I'm going to attach an event listener to extra element in order to fire the click event. 01:00.550 --> 01:05.740 For that, we need to write H2 thought at Event Listener. 01:08.900 --> 01:15.830 Remember that ad even, nor is that case sensitive, so you need always to write the words with capital 01:15.830 --> 01:23.720 letters, except the word ad, then open parentheses and pass the first parameter, the imit name as 01:23.720 --> 01:28.950 a string right to your click again. 01:29.090 --> 01:35.600 Remember that when you use an event listener, you always need to pass the event name without on as 01:35.600 --> 01:36.800 it was in previous approach. 01:37.250 --> 01:39.980 So you need to write, just click and not on click. 01:41.210 --> 01:48.290 The second parameter in at event listener method is a function which should be again an anonymous function 01:48.980 --> 01:51.370 and third parameter is a boolean value. 01:51.410 --> 01:53.900 True or false, which is optional. 01:53.900 --> 01:56.070 And we will discuss it a bit later. 01:56.480 --> 01:57.770 So right here function. 02:01.140 --> 02:04.560 Then inside the parentheses, right, constant dialogue. 02:08.250 --> 02:08.760 Cliqued. 02:13.980 --> 02:24.300 OK, reload the page, then click, and you see it works when I click on Having Clicked appears in console, 02:25.320 --> 02:28.390 you can create the function outside the event listener. 02:28.860 --> 02:33.390 But in this case, you need to use a regular function as a parameter. 02:33.390 --> 02:38.360 And at least now you need to pass the function name but without the parentheses. 02:39.120 --> 02:43.320 So let's create the same function outside and call it a. 02:47.560 --> 02:52.240 Then inside the court, the process rights again, consultor log collect. 02:56.400 --> 03:01.770 And then instead of anonymous function, let's put the function name as the second parameter. 03:05.910 --> 03:12.240 Reload that click and we have the exact same result. 03:13.690 --> 03:21.130 All right, as you remember from previous lecture, we were talking about the disadvantage of an approach 03:21.670 --> 03:28.650 where we were using even attributes in elements that we could not use the similar events, but with 03:28.690 --> 03:33.970 different functions at the same time in case of an event listener method, it's possible. 03:35.260 --> 03:41.880 So let's call it a function and change it slightly right here. 03:41.890 --> 03:53.470 The function name be then collect, be in council also for the function a let's write, collect a then 03:53.470 --> 04:00.700 add another event listener to H2 element and just change the function name write be. 04:03.820 --> 04:06.520 Reload, then click. 04:08.290 --> 04:15.220 And he said that both, at least in this work, when I click on Huddinge, both click events fail and 04:15.220 --> 04:17.400 in council we see it clicked and clicked. 04:17.410 --> 04:24.160 B That is one of the differences between add event listeners and event attributes. 04:26.840 --> 04:35.630 All right, now I'm going to talk about an event object, so what is an even object when an event occurs, 04:35.660 --> 04:42.410 the event object is created, it tells us the information about the event, the information about which 04:42.410 --> 04:49.430 element the event happened, on, which key was pressed for a key press event or exactly at what part 04:49.430 --> 04:53.030 of the page the user clicked for a click event and so on. 04:53.750 --> 04:59.870 When the event object is passed into a function, it is often given a parameter called eat or sometimes 04:59.870 --> 05:00.260 event. 05:02.090 --> 05:10.010 All right, let's remove these coats and just leave one function with the proper at event listener, 05:11.330 --> 05:15.980 then pass it as a parameter and write it inside. 05:15.980 --> 05:17.440 Cancel that log as well. 05:22.530 --> 05:23.100 Reload. 05:25.400 --> 05:26.210 Then click. 05:27.990 --> 05:35.370 And you see that in council, we've got the type of event, which is most events, if you drop down, 05:35.370 --> 05:39.190 it's you will see the list of different properties and their property values. 05:40.560 --> 05:42.150 Let's consider some of them. 05:42.840 --> 05:47.510 For example, the first property is Alky, which has a value false. 05:47.970 --> 05:52.860 It means that when I clicked on heading, I haven't been pressing on key. 05:53.820 --> 05:58.950 If I reload the page again, then click the heading. 05:58.950 --> 06:04.810 And at the same time I keep pressing on alt key that it will get the value as a true. 06:05.280 --> 06:07.680 So you see that we have true. 06:09.810 --> 06:17.280 OK, if you go down, you will notice client X and client Y properties, those properties indicate the 06:17.280 --> 06:20.240 exact coordinates of the clicked spot on the page. 06:20.610 --> 06:28.140 I mean, the whole browser window client X shows us the number of pixels from the left and client Y 06:28.140 --> 06:30.240 shows the number of pixels from the top. 06:31.590 --> 06:38.730 The next and useful properties which you may use in the future are offset X and offset Y. 06:39.270 --> 06:46.000 They are similar as client X and Y, but the difference is that it measures pixels of the element itself. 06:47.730 --> 06:55.800 OK, if you go deeper, you will see the path property, which consists of items from the current element 06:55.800 --> 06:57.230 to the global window object. 06:57.960 --> 07:01.320 If you drop down it, you will notice that it's actually an array. 07:02.010 --> 07:08.940 You can use those items with their proper index numbers and manipulate on that below. 07:08.940 --> 07:12.710 You can find the type of event which tells us that it's a click event. 07:13.710 --> 07:19.440 And also we have here a target property, which I think is the most important property in that list 07:19.800 --> 07:23.820 because we will frequently use it and also we will meet it in the future. 07:23.820 --> 07:28.700 Many times you'll see that it has a value H2. 07:29.460 --> 07:32.940 This is the element on which we have bound the click event. 07:34.050 --> 07:39.990 Let's use this property and see exactly what it returns right inside the console. 07:40.800 --> 07:41.640 Don't target. 07:45.800 --> 07:46.370 Remote. 07:47.790 --> 07:52.650 Click and we have H-2 aliment with its contents note manager. 07:54.330 --> 08:01.590 OK, now I'm going to show you kind of an interesting thing that gets rid of E parameter and inside 08:01.590 --> 08:02.310 console, right? 08:02.310 --> 08:07.170 Special what this so what to expect to get. 08:08.850 --> 08:12.330 Let's reload, then click. 08:13.380 --> 08:16.390 And you see that we have the same H2 element. 08:17.880 --> 08:24.030 I hope that this result is not surprising because you know, that this key word refers to the object. 08:24.510 --> 08:29.070 And in this case, H2 is an object on which kallick event is attached. 08:29.550 --> 08:32.460 Therefore this quote refers to H2 element. 08:33.150 --> 08:33.680 All right. 08:34.800 --> 08:41.280 As we said, there are lots of JavaScript events, but we are not going to discuss each of them because 08:41.280 --> 08:44.080 I think that it will be a little bit boring. 08:44.940 --> 08:47.430 There is a great source regarding events. 08:47.430 --> 08:54.600 You can visit developer Dot Mozilla dot org website and you can find here list of the most commonly 08:54.840 --> 08:56.040 frequently used events. 08:56.850 --> 08:58.910 I recommend to overview this list. 08:58.920 --> 09:04.110 It would be great if you introduced the majority of these events because in the future you may need 09:04.110 --> 09:05.400 to use some of that. 09:06.360 --> 09:11.390 You'll be able to find this link in the text document which will be attached to that lecture. 09:13.490 --> 09:14.000 All right. 09:15.210 --> 09:20.850 We are not done with events yet in the next video, I'm going to discuss more advanced things regarding 09:20.850 --> 09:21.300 events. 09:21.480 --> 09:22.520 So let's move on.