WEBVTT 00:00.870 --> 00:06.670 It's time to talk about one of the most important aspect in Tom and general in JavaScript as well. 00:07.050 --> 00:13.020 I'm going to show you how the Web pages can be interactive and dynamic using JavaScript events. 00:14.460 --> 00:18.680 So what is an event, events or actions that happen on a Web page? 00:18.690 --> 00:25.500 Your programming, as you remember, when we have been talking about functions, we said that in order 00:25.500 --> 00:27.820 to execute function, we need to call them. 00:28.650 --> 00:30.180 In this case, the same happens. 00:30.180 --> 00:34.070 But invoking function is managed by users behavior. 00:34.860 --> 00:41.120 I mean, if the user clicks on button or presses the keys or keyboard or moves the mouse and many others. 00:41.940 --> 00:45.960 So you can imagine how powerful and interesting things I'm going to show you. 00:47.280 --> 00:47.790 All right. 00:48.330 --> 00:49.770 Let's go back to Brackett's. 00:50.160 --> 00:56.340 At first, I want to say that there are different ways to set up JavaScript events and we will cover 00:56.340 --> 00:56.880 all of them. 00:57.390 --> 01:04.890 Now let's open indexed demo file and select one of the elements which will be used in order to attach 01:04.890 --> 01:05.510 the event. 01:06.450 --> 01:13.770 Let's choose adding a two element, then go back to script or JS file, which is empty for now, and 01:13.770 --> 01:16.620 get access on that element using query selector method. 01:17.340 --> 01:31.080 So create variable H to equal document dot query selector and inside the parentheses right header H2. 01:34.420 --> 01:42.250 Then in order to attach click event to that element, we need to write following H to dot unclick. 01:45.420 --> 01:52.290 Each time when we use events, we need to always right on before the actual name of the event, in this 01:52.290 --> 01:56.270 case, I use click event, which is one of the most frequently used. 01:56.940 --> 02:04.410 But besides the event, there are lots of other events, like on mouseover, on mouse, out on key press, 02:04.410 --> 02:05.610 onload and many others. 02:06.720 --> 02:13.650 OK, now we need to assign to the event the function, but in this case the function should be anonymous. 02:14.070 --> 02:16.590 So we don't need to assign the name to that function. 02:17.130 --> 02:18.090 Right function. 02:20.300 --> 02:28.880 And inside the curly braces, right, counsel, the clock and standard text collect. 02:34.270 --> 02:43.660 Reload the page, so if we click on adding elements, you'll see that we have clicked in console, it 02:43.660 --> 02:49.990 means that when I clicked on hatting, event was fired and the function was executed. 02:51.650 --> 03:02.240 OK, we can use another event on an element, let's say mouseover, and I'm going to copy it and then 03:03.020 --> 03:06.230 change unclick into mouseover. 03:10.990 --> 03:14.830 And also change the text in council, right, mouse over. 03:19.110 --> 03:19.680 Reload. 03:22.290 --> 03:27.630 If we mouse over the heading element, then the second function will be executed. 03:28.230 --> 03:34.110 So you see in mouse over and if we click on having that click event will be fired. 03:34.630 --> 03:36.710 Therefore, we have clicked in console. 03:38.460 --> 03:38.930 All right. 03:39.990 --> 03:44.710 Besides this kind of way, we can attach events to elements in a different way. 03:45.600 --> 03:50.010 I mean, that we need to add events as the HTML attributes to elements. 03:50.820 --> 03:54.020 But in this case, we don't need anonymous functions anymore. 03:54.690 --> 03:57.110 We need to assign names to these functions. 03:57.630 --> 03:59.490 So let's get rid of these codes. 04:02.280 --> 04:07.530 And right, function A and function B. 04:10.760 --> 04:20.000 Then go to index dot extremophile, find hiding elements and inside edge to tug at events as attributes 04:20.660 --> 04:21.860 right on Cleek. 04:25.080 --> 04:32.370 And as the value of that attribute, we need to write function name eight with parentheses. 04:35.030 --> 04:45.680 Then at second event, attribute or mouseover and the value as function B. 04:48.480 --> 04:49.050 Reload. 04:50.870 --> 04:59.760 And you see that the same happens as in previous example when we click or mouse over the heading out. 05:01.390 --> 05:01.910 All right. 05:03.110 --> 05:06.650 I have demonstrated this approach just for your information. 05:07.170 --> 05:12.130 This way of adding events is a little bit older and sometimes not flexible. 05:12.620 --> 05:14.810 So I do not recommend to use it. 05:15.590 --> 05:20.600 But anyway, you should know this approach because in practice, in the future, you may sometimes come 05:20.600 --> 05:22.650 across this type of coding. 05:23.900 --> 05:24.410 All right. 05:25.430 --> 05:32.060 What of the disadvantages of that approach is that when we assign the exact same event attributes with 05:32.060 --> 05:36.880 different functions, then only the first one is executed. 05:37.790 --> 05:38.960 So let's prove it. 05:39.560 --> 05:43.220 If we change on mouse over into unclick 05:45.770 --> 05:48.230 and also. 05:50.010 --> 06:01.200 The text inside Castle, the log right here, clicked and then clicked B. 06:03.610 --> 06:14.260 Then reload, if you click on Harding, then you will see that all the function is executed and Function 06:14.260 --> 06:23.530 B is ignored in order to fix that, I mean to attach to the element similar events and also execute 06:23.530 --> 06:24.020 all of them. 06:24.550 --> 06:31.210 We need to use model and a frequently used approach, which is to add event listeners. 06:32.260 --> 06:38.080 So let's stop here and discuss how to use an event listener in the next video.