Event Listeners

[00:00:00]
>> Just to recap what we have been working on, we've been working through a quiz webpage that is going to ultimately be a little bit of a test for someone to see their JavaScript knowledge, put it to the test. We're gonna have some kind of statement, a couple of options true or false answers.

[00:00:23]
When someone clicks on one of the answers, we're going to show them whether they were correct or incorrect with some colors. We're gonna show them what the explanation behind this statement or this fact about JavaScript is. And so this is our end goal, we're working towards building this interactive quiz game.

[00:00:43]
And earlier, we had been working on a version locally ourselves in our text editors and we've gotten pretty far. We've gotten to write several functions that we're gonna need, we've gotten to manipulate the page a little bit, insert our own fact in it. But we still need to do some work to make this an interactive quiz and give the user that feedback about what the real answer is.

[00:01:07]
So that is what we're gonna pick up with now. And in order to do that, we're gonna have to talk about events in JavaScript, because events are how we can make our webpages interactive. And right now, our page, it's kind of like MC Hammer said, we can't touch it.

[00:01:29]
Well, we can, we can try clicking on buttons and things on our page, but nothing is really happening when we do. What we want is for the action that I take when I click something, we want that to do stuff, we want that to make things happen on our page.

[00:01:45]
So what we want to do is we want to handle any events, any interactive actions that the user might take. Or any things that might be happening here that we can then take them and run with to change our page as we see fit. So this is what we need to do.

[00:02:02]
And the web browser is really set up to do this. So again, keeping in mind that JavaScript was created as a scripting language inside of the browser, JavaScript and the browser, they kind of go hand in hand. And the way it works is that, when the user does something like click a button, the web browser fires an event.

[00:02:21]
So browsers have this concept of events, there are all kinds of different events, but click is a really great example. So I click the button, the browser fires or sends off an event that says, hey, a click happened. And what we need to do in our JavaScript is we need to handle it.

[00:02:39]
So that is how we're going to be able to react to things that happen, is we're going to listen for any events that the browser might be firing and then we're going to handle them. And how we do that is what we're gonna talk about now. So there is a method on elements in our DOM that is called addEventListener.

[00:03:05]
[COUGH] And what this does is it let's say attach what's called an EventListener to a particular event that the browser might fire. If that event had something to do with whatever element we are interested in listening for changes to or listening for events on. So for example, if I add an event listener to the entire document, what I'm gonna say here, I'm gonna pass in two things to the addEventListener method.

[00:03:33]
The first thing is the name of the event that I care about, in this case click. And the second thing, what is that? That second thing after the comma here in the parameter, so the argument that I'm passing into this method, what do we notice? We learned what that weird symbol is earlier.

[00:03:51]
>> An arrow.
>> It's a fat arrow which?
>> Function.
>> It creates a function, exactly. So we have an arrow function because we don't need to really name this function, but this function, what it is? So it's called a callback and some in some resources, you'll find it.

[00:04:08]
We also call it an event handler function. And what it does is JavaScript is gonna take that function and then anytime it fires a click event on whatever element we've attached to, in this case, the entire document. Is going to call that function and run whatever code that function tells it to run.

[00:04:29]
So in this case, it's gonna run console.log clicked. So let's try it out. If I go into my, this is just my other version of this page that we've made. If I add this event listener now, when I click anywhere on the page. Do you see how that little 4, 5, 6 it's showing me that all of these different click events have happened.

[00:04:54]
And it's it's just kind of keeping them together and incrementing this number here instead of like logging, logging, logging, logging, just to save me some eyeball strain. [LAUGH] So this is this is showing that now by calling that dot add event listener method now I am getting information.

[00:05:15]
I'm getting basically the option to run my function that I declared and I decided what to write in, what code to put in. That is running every time somebody clicks anywhere on the document. Cool, pretty cool, I think so, yes. So just to review, we have to pass into things.

[00:05:35]
And if you're like me, sometimes it's hard to remember what we have to pass in. So again, you can always check on MDN if you're not sure what parameters this method takes. The name of the event click is one that's gonna come up a lot and then the handler function that JavaScript is gonna call whenever that event happens.