Now in previous lessons we saw how Javascript allows us to create higher order functions. 1
When we talk about higher order functions, we're referring to the function that's able to take functions 2
as inputs. 3
So in this case the addEventListener is a higher order function, as it takes the respondToKey function 4
as an input. 5
Now what about the other side? What about the function that gets passed in as an input? 6
Well this is actually called a callback function because it allows us to wait for something to finish 7
happening, 8
for example waiting for a click event, and then the callback function gets called back and executed. 9
So previously when our button detects a click it calls the callback function. 10
And in this case when the document or the entire web page detects a key press then the document will 11
call this function respondToKey. 12
Now when that happens we can get it to send us some information that it'll only know once the event 13
happens, namely say which button was clicked, or which keyboard key was pressed. 14
So if we head into our Wikipedia page again and we inspect on our Javascript object and we again gain 15
access to the h1 using the $0 sign. 16
Now we know that we can add an event listener by simply saying $0.addEventListener say click. 17
And once that does happen let's call this anonymous function and we can console.log something. 18
Now in this case all that we're doing is saying that attach this event listener to $0, which of course 19
is this h1, 20
and get it to listen for click events. 21
When it detects those click events get it to call this function. 22
Now this is a very simple form of the event listener, 23
but as we saw in the last lesson, we can also get the event that triggered this function get the event 24
that triggered this function passed back through the callback function. 25
So instead of console logging simply "I got clicked", 26
we can actually console.log the actual event that triggered the function. 27
So in this case if I hit enter and I click on this JavaScript h1, then you can see that it's console 28
logging the event that triggered the click. 29
So in this case it was a mouse click and you can see all of these properties that are associated with 30
that mouse event, for example which part of the screen did I click on, what was the type of event, and a 31
whole bunch of other things. 32
Now when you're creating this anonymous function, you can call this parameter anything you want. 33
You'll commonly see it as e or evt for event. 34
It'll work exactly the same. 35
Now the reason for this is because, say if we create a function called sayHi, and we give the name of 36
the input as to, and then we say console.log "Hello" plus whatever input we got. 37
So now we can call this function saying say hi to Tom, and it'll say "Hello, Tom". 38
Now we can also create a function sayHi, and, instead of calling our input to, we call it name. 39
So now we're saying hi to name. 40
And again it does exactly the same thing which says hello to the input that we pass in which is name. 41
So now we can again say sayHi("Tom"), and it'll still say "Hello, Tom". 42
So the name that you give the input really doesn't matter. 43
It's the same as when you create a variable called name or you create a variable called to. 44
It's completely up to you what you call it. 45
So this is why when we create an event listener and we give that input any name, say e, it will still 46
work exactly the same, passing in the event that triggered the callback function. 47
But the slightly crazy part is that this callback function is not called by us but it's called by the 48
object that experienced the click. 49
And when that happens we can get it to send us some information that it'll only know once the event 50
happens. 51
For example in our drumkit then that's which button got clicked by the user. 52
So this callback function can be a little bit confusing and a little bit mysterious. 53
So again, as before, I want to show you both sides of the coin. 54
So let's pretend to create the function addEventListener, but so that it's not confusing we'll call 55
it anotherAddEventListener. 56
And as we know it takes two inputs, the first being the type of event and the second being the callback. 57
So this addEventListener will do a number of complex things that detects when an event happens but when 58
an event does happen then it'll create an event object and let's call that object eventThatHappened, 59
just so that we're clear. 60
So let's say that we pressed a key on the keyboard. Then the event object that gets created will capture 61
a number of things about that event, 62
for example what was the event type. 63
In this case it was a key press event. And it might have another property such as, well, which key then. 64
Let's say that we pressed the p key to generate this event. 65
And it might have other things like duration of keypress, and let's say this was equal to two seconds. 66
So when the event happens, namely pressing a key on the keyboard, then this object gets created based 67
on that event. 68
And now we can pass that object back through the callback method so that the programmer, if they wish, they 69
can get the event object and use it to see what event triggered this event listener. 70
But of course we know that our callback doesn't get called for all types of events, 71
right? 72
So in fact our addEventListener might check to see if eventThatHappened.eventType is actually 73
equal to the type of event that the programmer was looking to detect, 74
and then and only then do we actually trigger the callback function. 75
So if this is our function, addEventListener, and this is the part that we can't really see, then the 76
part that we do see and the part that we write is actually just calling the addEventListener, and we 77
pass in a number of inputs, right? 78
Say we pass in that we're looking to detect the key press event, and when that happens we want it to 79
trigger an anonymous function that essentially just does some console logging. 80
So console.log. 81
And what we want to log is the event that triggered the callback. 82
So now if I hit enter then you can see that when the event gets triggered by say a key press on the 83
keyboard, 84
and if the type of event was equal to the type that we were looking for, namely key press, then we trigger 85
the callback. And the callback can send us that event object which now gets logged in our console. 86
So you can see this output looks really similar. 87
Say if we were simply using proper code, not our simplified code, and we said document.addEventListener 88
to listen for key press and once you do detect that key press then call the anonymous function passing 89
in the event that triggered the key press, and then we're simply just going to console.log that event object. 90
So now when I hit enter and I press any key on the keyboard then you can see we get back this object 91
called KeyboardEvent, and it has a number of properties including things like, for example, the key that 92
was pressed to trigger this event. 93
So again I find that it usually helps to understand what exactly is going on here by using the debugger 94
and stepping through each step of the way. 95
So let's try this again but this time we're going to use the debugger to see what's happening. 96
So again I'm going to call anotherAddEventListener, passing in the type of event that we're looking 97
to detect, 98
and also the callback that should happen when it does get detected. 99
But just above I'm also going to add the debugger keyword so that when I hit enter I enter the debug 100
mode. 101
So now I'm going to step through our function calls, and we begin by calling anotherAddEventListener, 102
passing in these two inputs. 103
So that takes us to where that function was declared and we stepped through each of the lines of code. 104
The first thing that happens is we're waiting to detect an event. 105
And this part of the code waits to detect an event. 106
Let's say that in this imaginary world I press the P key on the keyboard. 107
Now at that point then this eventThatHappened object gets created and it captures a lot of information 108
about my key press, 109
namely that the event type was of the key press type, the key that I pressed was P, and I pressed on it 110
for two seconds. 111
So now that we have this event object created after I triggered the event then our code will check if 112
the type of the event that happened is equal to the type that the program was looking for then it will 113
go ahead and trigger the callback function. 114
And if we step through then you can see that the callback function is of course this part, the function 115
that we used as an input. 116
And it goes ahead and tries to log the event object. 117
And this is when we see that event show up down here. 118
And that is how we came about getting hold of this event object. 119
Now callbacks are notoriously difficult concept to grasp, and even some developers who've been working 120
for a number of years struggle with this particular concept. 121
So don't worry if this is the first time you've come across it and it seems a little bit confusing. What 122
I encourage you to do is to recreate our addEventLlistener function and just go through the motions of 123
what I did in this lesson without having to watch the video. Play around with the code and also play 124
around with the debugger and see how the code works behind the scenes. 125
Now we're going to come back to this topic of callbacks many many more times in the coming lessons, 126
so this is not the only time that you'll come across it. 127
And for all the difficult concepts I try to sprinkle in plenty of repetition so that I make sure that 128
you really really do get it because it is a really important concept that we'll come to rely on when 129
we're creating more and more complex web apps.