WEBVTT 0 00:00.300 --> 00:07.030 Now in previous lessons we saw how Javascript allows us to create higher order functions. 1 00:07.080 --> 00:13.830 When we talk about higher order functions, we're referring to the function that's able to take functions 2 00:14.040 --> 00:14.980 as inputs. 3 00:15.120 --> 00:22.440 So in this case the addEventListener is a higher order function, as it takes the respondToKey function 4 00:22.830 --> 00:24.180 as an input. 5 00:24.180 --> 00:30.270 Now what about the other side? What about the function that gets passed in as an input? 6 00:30.570 --> 00:36.780 Well this is actually called a callback function because it allows us to wait for something to finish 7 00:36.780 --> 00:37.460 happening, 8 00:37.590 --> 00:45.100 for example waiting for a click event, and then the callback function gets called back and executed. 9 00:45.330 --> 00:50.880 So previously when our button detects a click it calls the callback function. 10 00:50.940 --> 00:58.410 And in this case when the document or the entire web page detects a key press then the document will 11 00:58.410 --> 01:01.250 call this function respondToKey. 12 01:01.260 --> 01:08.040 Now when that happens we can get it to send us some information that it'll only know once the event 13 01:08.040 --> 01:14.040 happens, namely say which button was clicked, or which keyboard key was pressed. 14 01:14.040 --> 01:20.820 So if we head into our Wikipedia page again and we inspect on our Javascript object and we again gain 15 01:20.820 --> 01:24.070 access to the h1 using the $0 sign. 16 01:24.240 --> 01:31.500 Now we know that we can add an event listener by simply saying $0.addEventListener say click. 17 01:31.510 --> 01:39.390 And once that does happen let's call this anonymous function and we can console.log something. 18 01:39.420 --> 01:46.950 Now in this case all that we're doing is saying that attach this event listener to $0, which of course 19 01:46.950 --> 01:48.450 is this h1, 20 01:48.990 --> 01:53.000 and get it to listen for click events. 21 01:53.280 --> 01:58.960 When it detects those click events get it to call this function. 22 01:58.960 --> 02:02.680 Now this is a very simple form of the event listener, 23 02:02.760 --> 02:10.770 but as we saw in the last lesson, we can also get the event that triggered this function get the event 24 02:10.860 --> 02:15.710 that triggered this function passed back through the callback function. 25 02:15.720 --> 02:18.900 So instead of console logging simply "I got clicked", 26 02:18.900 --> 02:23.780 we can actually console.log the actual event that triggered the function. 27 02:24.390 --> 02:31.380 So in this case if I hit enter and I click on this JavaScript h1, then you can see that it's console 28 02:31.380 --> 02:34.750 logging the event that triggered the click. 29 02:35.040 --> 02:41.490 So in this case it was a mouse click and you can see all of these properties that are associated with 30 02:41.490 --> 02:49.350 that mouse event, for example which part of the screen did I click on, what was the type of event, and a 31 02:49.350 --> 02:50.900 whole bunch of other things. 32 02:50.910 --> 02:56.980 Now when you're creating this anonymous function, you can call this parameter anything you want. 33 02:57.030 --> 03:01.290 You'll commonly see it as e or evt for event. 34 03:01.350 --> 03:03.670 It'll work exactly the same. 35 03:03.690 --> 03:10.050 Now the reason for this is because, say if we create a function called sayHi, and we give the name of 36 03:10.050 --> 03:16.280 the input as to, and then we say console.log "Hello" plus whatever input we got. 37 03:16.290 --> 03:22.920 So now we can call this function saying say hi to Tom, and it'll say "Hello, Tom". 38 03:22.950 --> 03:29.790 Now we can also create a function sayHi, and, instead of calling our input to, we call it name. 39 03:29.790 --> 03:32.390 So now we're saying hi to name. 40 03:32.640 --> 03:39.480 And again it does exactly the same thing which says hello to the input that we pass in which is name. 41 03:39.720 --> 03:45.320 So now we can again say sayHi("Tom"), and it'll still say "Hello, Tom". 42 03:45.330 --> 03:48.480 So the name that you give the input really doesn't matter. 43 03:48.510 --> 03:55.220 It's the same as when you create a variable called name or you create a variable called to. 44 03:55.350 --> 03:57.710 It's completely up to you what you call it. 45 03:57.720 --> 04:04.290 So this is why when we create an event listener and we give that input any name, say e, it will still 46 04:04.290 --> 04:09.820 work exactly the same, passing in the event that triggered the callback function. 47 04:09.870 --> 04:18.450 But the slightly crazy part is that this callback function is not called by us but it's called by the 48 04:18.450 --> 04:21.520 object that experienced the click. 49 04:21.780 --> 04:29.310 And when that happens we can get it to send us some information that it'll only know once the event 50 04:29.310 --> 04:30.080 happens. 51 04:30.090 --> 04:34.270 For example in our drumkit then that's which button got clicked by the user. 52 04:34.350 --> 04:39.360 So this callback function can be a little bit confusing and a little bit mysterious. 53 04:39.360 --> 04:43.280 So again, as before, I want to show you both sides of the coin. 54 04:43.470 --> 04:49.230 So let's pretend to create the function addEventListener, but so that it's not confusing we'll call 55 04:49.230 --> 04:53.780 it anotherAddEventListener. 56 04:54.180 --> 05:02.910 And as we know it takes two inputs, the first being the type of event and the second being the callback. 57 05:04.350 --> 05:12.900 So this addEventListener will do a number of complex things that detects when an event happens but when 58 05:12.900 --> 05:22.660 an event does happen then it'll create an event object and let's call that object eventThatHappened, 59 05:22.990 --> 05:24.990 just so that we're clear. 60 05:25.060 --> 05:32.530 So let's say that we pressed a key on the keyboard. Then the event object that gets created will capture 61 05:32.620 --> 05:34.660 a number of things about that event, 62 05:34.750 --> 05:37.670 for example what was the event type. 63 05:37.780 --> 05:45.280 In this case it was a key press event. And it might have another property such as, well, which key then. 64 05:45.850 --> 05:49.510 Let's say that we pressed the p key to generate this event. 65 05:49.750 --> 05:58.180 And it might have other things like duration of keypress, and let's say this was equal to two seconds. 66 05:58.260 --> 06:05.910 So when the event happens, namely pressing a key on the keyboard, then this object gets created based 67 06:05.910 --> 06:06.890 on that event. 68 06:07.160 --> 06:15.540 And now we can pass that object back through the callback method so that the programmer, if they wish, they 69 06:15.540 --> 06:22.400 can get the event object and use it to see what event triggered this event listener. 70 06:22.530 --> 06:27.560 But of course we know that our callback doesn't get called for all types of events, 71 06:27.570 --> 06:28.090 right? 72 06:28.320 --> 06:39.390 So in fact our addEventListener might check to see if eventThatHappened.eventType is actually 73 06:39.390 --> 06:45.310 equal to the type of event that the programmer was looking to detect, 74 06:45.630 --> 06:51.300 and then and only then do we actually trigger the callback function. 75 06:51.300 --> 06:57.510 So if this is our function, addEventListener, and this is the part that we can't really see, then the 76 06:57.510 --> 07:03.420 part that we do see and the part that we write is actually just calling the addEventListener, and we 77 07:03.420 --> 07:05.580 pass in a number of inputs, right? 78 07:05.640 --> 07:11.910 Say we pass in that we're looking to detect the key press event, and when that happens we want it to 79 07:11.910 --> 07:16.380 trigger an anonymous function that essentially just does some console logging. 80 07:16.380 --> 07:18.460 So console.log. 81 07:18.990 --> 07:24.330 And what we want to log is the event that triggered the callback. 82 07:24.330 --> 07:33.900 So now if I hit enter then you can see that when the event gets triggered by say a key press on the 83 07:33.900 --> 07:34.750 keyboard, 84 07:35.040 --> 07:41.940 and if the type of event was equal to the type that we were looking for, namely key press, then we trigger 85 07:42.060 --> 07:49.680 the callback. And the callback can send us that event object which now gets logged in our console. 86 07:49.710 --> 07:52.040 So you can see this output looks really similar. 87 07:52.050 --> 07:58.860 Say if we were simply using proper code, not our simplified code, and we said document.addEventListener 88 07:59.790 --> 08:07.590 to listen for key press and once you do detect that key press then call the anonymous function passing 89 08:07.590 --> 08:14.850 in the event that triggered the key press, and then we're simply just going to console.log that event object. 90 08:14.850 --> 08:23.070 So now when I hit enter and I press any key on the keyboard then you can see we get back this object 91 08:23.070 --> 08:29.100 called KeyboardEvent, and it has a number of properties including things like, for example, the key that 92 08:29.100 --> 08:31.230 was pressed to trigger this event. 93 08:31.230 --> 08:39.300 So again I find that it usually helps to understand what exactly is going on here by using the debugger 94 08:39.390 --> 08:41.990 and stepping through each step of the way. 95 08:42.270 --> 08:47.890 So let's try this again but this time we're going to use the debugger to see what's happening. 96 08:48.120 --> 08:53.640 So again I'm going to call anotherAddEventListener, passing in the type of event that we're looking 97 08:53.640 --> 08:54.490 to detect, 98 08:54.660 --> 08:59.310 and also the callback that should happen when it does get detected. 99 08:59.490 --> 09:05.430 But just above I'm also going to add the debugger keyword so that when I hit enter I enter the debug 100 09:05.430 --> 09:05.920 mode. 101 09:06.210 --> 09:13.260 So now I'm going to step through our function calls, and we begin by calling anotherAddEventListener, 102 09:13.290 --> 09:16.650 passing in these two inputs. 103 09:16.650 --> 09:22.740 So that takes us to where that function was declared and we stepped through each of the lines of code. 104 09:22.770 --> 09:26.530 The first thing that happens is we're waiting to detect an event. 105 09:26.610 --> 09:31.110 And this part of the code waits to detect an event. 106 09:31.110 --> 09:37.020 Let's say that in this imaginary world I press the P key on the keyboard. 107 09:37.020 --> 09:44.700 Now at that point then this eventThatHappened object gets created and it captures a lot of information 108 09:44.880 --> 09:46.800 about my key press, 109 09:46.920 --> 09:53.160 namely that the event type was of the key press type, the key that I pressed was P, and I pressed on it 110 09:53.160 --> 09:54.580 for two seconds. 111 09:54.630 --> 10:03.030 So now that we have this event object created after I triggered the event then our code will check if 112 10:03.030 --> 10:10.110 the type of the event that happened is equal to the type that the program was looking for then it will 113 10:10.110 --> 10:13.060 go ahead and trigger the callback function. 114 10:13.080 --> 10:18.930 And if we step through then you can see that the callback function is of course this part, the function 115 10:18.930 --> 10:20.730 that we used as an input. 116 10:21.030 --> 10:25.810 And it goes ahead and tries to log the event object. 117 10:25.980 --> 10:29.040 And this is when we see that event show up down here. 118 10:29.220 --> 10:33.630 And that is how we came about getting hold of this event object. 119 10:33.630 --> 10:40.350 Now callbacks are notoriously difficult concept to grasp, and even some developers who've been working 120 10:40.350 --> 10:44.330 for a number of years struggle with this particular concept. 121 10:44.490 --> 10:51.390 So don't worry if this is the first time you've come across it and it seems a little bit confusing. What 122 10:51.390 --> 10:58.850 I encourage you to do is to recreate our addEventLlistener function and just go through the motions of 123 10:58.850 --> 11:05.660 what I did in this lesson without having to watch the video. Play around with the code and also play 124 11:05.660 --> 11:10.160 around with the debugger and see how the code works behind the scenes. 125 11:10.160 --> 11:16.100 Now we're going to come back to this topic of callbacks many many more times in the coming lessons, 126 11:16.220 --> 11:19.390 so this is not the only time that you'll come across it. 127 11:19.490 --> 11:25.820 And for all the difficult concepts I try to sprinkle in plenty of repetition so that I make sure that 128 11:25.820 --> 11:31.640 you really really do get it because it is a really important concept that we'll come to rely on when 129 11:31.640 --> 11:34.150 we're creating more and more complex web apps.