So now that we've seen how we can add an event listener to our HTML elements in order to listen for when 1
they get clicked, let's drill down and take a deeper look at how this addEventListener function works, 2
because it looks a little bit weird and different from the functions that we've seen so far. 3
So over here I've got the Javascript Wikipedia page open, and I'm going to use it to show you a couple 4
of things, 5
and what happens when we add an event listener. 6
So one of the cool things that you can do in Chrome is you can highlight say the title here and you 7
can right click, go into Inspect, 8
which brings up the Chrome Developer Tools, and you see that the element that's currently selected, 9
so the h1, can be accessed in the console using this $0 variable. 10
So if we head into the console and we type $0 and hit enter, then you can see that this is bound 11
to the h1 element up at the top here. And you can do some cool things with this and mess around with web sites. 12
Like if you say $0, which is the h1 element, 13
.innerHTML is equal to, instead of JavaScript, 14
let's say it's equal to AngelaScript. 15
And now I've just edited Wikipedia's web site on the fly, and this is a fun way that you can mess with friends. 16
Now of course when you reload the web site then all of your changes are gone because it's loading up 17
the html page from Wikipedia servers. 18
So all the changes that you're making is to your local copy of this Wikipedia page inside the browser. 19
But if you catch your friend unaware and edit some of these pages it's a pretty good prank. 20
Now at the moment when I click on this h1, absolutely nothing happens, because it's not a button and 21
it's not bound to any event listeners, at least not yet. 22
But that's exactly what we're going to do. 23
We're going to say $0, referring to the h1, .addEventListener, and the type of event that 24
we want it to listen to are clicks, 25
so that's the first input. 26
The second one is going to be a function and that function is simply going to console.log 27
the fact that I got clicked. All right. Cool. 28
So now if I hit enter, then that click event listener gets added to our h1, and if I click on this I now 29
get the console log that says it got clicked. And I can do that many many times. 30
Now in this case we've got an anonymous function as the second input and we know that we can also specify 31
it like this. 32
So instead of using an anonymous function we could use a named function, say something called 33
respondToClick. 34
So the word click is the event that we're detecting and that's the first input or input 1. 35
Now the second input is the function that should be called once the h1 detects the click event. 36
So you can see that addEventListener is taking two inputs, 37
the first one specifying what event it should listen to, and the second one specifying what it should 38
do once that event gets detected. 39
Now this is a little bit different from the functions that we've seen so far, because instead of just 40
passing in strings or numbers or other simple data types, we're actually passing in a function as an input. 41
Now because we can't look at the code that Chrome uses to implement addEventListener because we didn't 42
write that method, 43
so let's try and create both sides of the coin and in the process we can better understand how our event 44
listener works. 45
So let's say that we wanted to create a calculator. 46
So we create a function that's called calculator and it could take two inputs, 47
the first number and the second number. 48
And then we're going to do some calculations with it. 49
So we'll say maybe return as the output the first number plus the second number. 50
So now if I call this function and I pass in some values, say 2 and 3, then I will get the output 51
as 5, right? 52
2 + 3. 53
Now if I wanted to change my calculator, so instead of adding my numbers I want my calculator to be able 54
to multiply, 55
then I would have to change my calculator function and say, instead of adding, actually I want my calculator 56
to take these two numbers, first number, second number, and then it should return the first number multiplied 57
by the second number. 58
So now I can call my calculator and pass in the same inputs, 2 and 3, and I'll get back 6, because now 59
our calculator function is multiplying the first number by the second number. 60
Now this is a little bit painful because, you know, the kind of calculators that we're used to allow us 61
to specify on the fly whether we want to multiply or add or divide. 62
We don't actually have to go and change the actual calculator each time. 63
So what can we do instead? 64
Well, what if we created a function that was called add, and it took two inputs, the first number and the 65
second number? 66
And this function basically just adds the numbers, right? 67
So it returns the first number plus the second number. And then we go and create another function, and 68
we call this one multiply and this one again takes two inputs and it returns the first number multiplied 69
by the second number. 70
So now that we've got two different types of functions, how can we create a function that's called calculator 71
to be able to pick and choose whether we're going to add or multiply? 72
So this is a case where being able to pass in a function as an input to another function becomes really 73
handy. 74
So say we've created this function called calculator and instead of simply just taking two numbers as 75
the inputs, it's also going to take an input called the operator, and this input can be changed on 76
the fly when we're calling this function. 77
And when this function calculator gets called, we simply call the operator function, whatever it is that 78
the user chose, passing in the two inputs and return that value as the output. 79
All right. So now let's go and hit enter and have all three of these functions available to us, 80
and let me show you how we would call this. 81
So instead of having to say add 2 and 3, or multiply 2 and 3, we can simply call our calculator 82
function, and we can pass in our numbers, let's say 4 and 5, 83
and the third input, as you can see here, is expecting a function, because it's going to call it inside 84
the body of this calculator. 85
So let's say if we wanted to use our calculator to add 4 to 5, then we can simply specify the name 86
of our add function that's created up here, 87
and if we hit enter you'll see that we get the result 9. 88
Now if we decided to use the multiply function instead then what would happen is that we would call 89
the calculator function, it would go and find where it was declared, 4 would get passed into the first 90
input, num1, 5 becomes num2, and multiply becomes operator. 91
So once it gets into the body of the function, it's going to output whichever function was passed in 92
as the operator, 93
so in this case multiply, and it will pass into that function multiply the same two numbers that we passed in 94
to calculator. 95
So now if I hit enter you can see we get 20 because our calculator is using this function to calculate 96
instead of this one. 97
Now before we mentioned that Chrome Developer Tools does a whole bunch of really awesome things, and one 98
of those things is something called the debugger. 99
So if you just type in the keyword debugger and then hold down shift and hit enter, then call the function 100
that you want to debug, 101
say calculator, I don't know, 3 and 4, and multiply, 102
and then we hit enter, then we enter the debug mode. 103
So this is cool. 104
And what you can do here is you can step through all of the steps that the browser goes through to give 105
you that final answer. 106
So we can see the process step by step. 107
So this is usually used when you're trying to figure out what's going wrong in your code because instead 108
of playing computer in your head when you're imagining what should happen every step of the way sometimes 109
you're wrong and it's really useful to see what's actually happening every single step of the way. 110
So let's stop. 111
The first thing to do is you're going to click on this button here with a down arrow, and this steps into 112
the next function call. 113
So once I click on it we start off by calling the function calculator. 114
So it goes and finds where that function was defined which is here of course and it passes in those 115
inputs that we gave before which is 3, 4 and multiply. 116
So now num1 equals 3, 117
num2 equals 4, 118
and the third input, operator, is equal to a function, as denoted by the little f sign and the function 119
is the multiply function which is up here. 120
So now the next step is that it enters into the body of the calculator function and it tries to call 121
this function operator which is currently the same as the multiply function. 122
So now, if we keep stepping through, it finds that multiply function and it subs in those two inputs, 123
where num1 is equal to 3, 124
and num2 is equal to 4, 125
and it returns the value of num1 multiplied by num2. 126
So now if we continue stepping through it takes that value that we got back and returns it as the output 127
of the multiply function and then returns it as the output of the calculator function. 128
And finally we get to the end of our code and we output the number 12. 129
So this is a pretty neat trick 130
whenever you're getting confused what's actually happening in each of the functions you write. 131
And this way you can see stepwise everything that the browser is doing 132
one function call at a time. 133
These types of functions which can take other functions as inputs are called higher order functions 134
and this feature is available in a number of modern languages like Javascript, Pascal, Swift, and a whole 135
bunch of other ones, 136
but it's not universal. 137
It's not something that's available in all programming languages, but it's something that we'll rely on 138
heavily in Javascript as we learn to manipulate the DOM and give our web site more and more behavior. 139
So we'll come across this many many times. Now, as a challenge, 140
I want you to create a full set of operators for our calculator. 141
So I want you to create the code that we've already made, 142
so a calculator that takes two inputs and a function as an input, and complete these functions so that 143
we have an add function, 144
we have a multiply, 145
we have a divide and a subtract, so that when you call the calculator you can say something like calculator 146
6 and 3 and subtract and it will give you the right answer. 147
So pause the video and complete that challenge, and once you're done go ahead and try out the debugger and 148
step through the function calls so that you're happy with how it works and how you can pass functions 149
as inputs to other functions.