Transcript from the "Event Listeners" Lesson
[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: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: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.
>> An arrow.
>> It's a fat arrow which?
>> 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: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.