Complete Intro to Web Development, v2 Events and Listeners

[00:00:00]
>> Brian Holt: We have events and listeners as well. So a big reason that we use JavaScript, so far, we've just been kind of modifying things. This would have been better in the first place if I had just made it modified by JavaScript because that's what I wanted it to do.

[00:00:12] But now, I'm gonna teach you how to be reactive to user input, which is more what JavaScript is more useful for in the browser.
>> Brian Holt: So if I have down here this Click me button, I want it to be able to react to a user clicking on it.

[00:00:26] I don't want it to just do nothing. So if I click on it
>> Brian Holt: What is going on with this?
>> Brian Holt: I swear this was working before. So I'm just gonna do it inside of my experiments here.
>> Brian Holt: So I'm going to put this in my index.html.
>> Brian Holt: And I'm just going to replace this.

[00:01:06]
>> Brian Holt: This script tag does not end.
>> Brian Holt: So I'll save that.
>> Brian Holt: Now, I'm going to open that index.html. I have a one button on here, if I click it, It says Hey there, right? This is what an alert is. An alert is these pop over dialogues that everyone hates.

[00:01:34] Yeah, that's an alert.
>> Brian Holt: Or I think there's also a dialogue.
>> Brian Holt: There's a bunch of them.
>> Brian Holt: So that's what that does. Let's talk about the event listener part of it.
>> Brian Holt: So button, I did a query selector. I get a hold of the button, right? Which is this button up here.

[00:02:00] I then do this function called addEventListener. So you're basically saying I'm waiting for this event to happen, whenever a click happens on this button, run this function, right? So I'll wait for the click, as soon as someone clicks, then run this function. And inside of there, I'm saying, hey there, that's why I'm doing the alert, right?

[00:02:22] So that's what an event listener does. It's just waiting for something, there's more types of events than just clicks, that's just one of them.
>> Brian Holt: Questions about that?
>> Brian Holt: Okay.
>> Brian Holt: You'll often call these a callback. You'll hear that word callback. It's just a function that you provide that gets called back by something else, and that's a callback.

[00:02:57]
>> Brian Holt: Alert is a super, super annoying function, so don't use alert. It's useful for debugging purposes and nothing else. Or like you really want warn someone like you're about to do something that's going to screw something up, just be super aware that you're doing that.
>> Brian Holt: And I wanted to break this down right here.

[00:03:15] People kind of get weirded out by seeing curly brace, parentheses, semi-colon. So the curly brace is connected to this function, right? This parentheses is connected to this parentheses right there. And then, the semicolon being the end of that statement, right? So that's why all that stuff is together.

[00:03:38]
>> Brian Holt: Good?
>> Brian Holt: Okay.
>> Brian Holt: Let's do another example with an input tag. So what I want to do is I wanna be able to type something into an input. And I want whatever is being typed into this input to immediately be put into a different paragraph tag, right?

[00:04:06] So if I type into it, does this work? It does work, neat. So as soon as I type into this something, it's also putting it beneath it as well, right? Understand the functionality there? So what I'm gonna do here is I'm gonna grab the input, document.querySelector, input to copy.

[00:04:27]
>> Brian Holt: Then, I'm gonna grab the paragraph by querying the selector p to copy to, right? So this grabs the input. This grabs the paragraph. And so, I'm gonna say input .addEventListener. And then, I'm gonna listen for keyup. So keyup is whenever you lift your finger off the key.

[00:04:49] So whenever that happens, it's going to copy whatever is inside of the input. So input.value, right?
>> Brian Holt: And I'm going to put that inside of paragraph.innerText.
>> Brian Holt: Make sense?
>> Brian Holt: So that's why this is, I can't modify anything in this page. I'm super annoyed by this.
>> Brian Holt: Anyway, you could also do keydown here.

[00:05:19] That would technically work. So it would be whenever I pushed the button down that the event would be fired. However, keydown happens before the value was inputted into the input. So you would actually always be one key behind, which is annoying.
>> Brian Holt: And let's just put that in, just to show you what that actually ends up looking like.

[00:05:42] Put this in here
>> Brian Holt: So I'll refresh, make sure this works.
>> Brian Holt: That does work. Okay, so if I change this to keydown.
>> Brian Holt: So notice I type F
>> Brian Holt: And nothing happens, right? But if I hit F again, you get the last one, right? So I pressed the button, keydown happens, and then whatever I typed gets put into the input.

[00:06:26] So if I type G, keydown happens, and then G gets put into the input, and that's when it gets copied. So it's always gonna one key behind.
>> Brian Holt: So that's why it's missing the f there on the end. So that's why we did keyup, cuz keyup happens after the value is put into the input.

[00:06:45]
>> Brian Holt: Make sense?
>> Brian Holt: So these are subtleties that you have to worry about with events. And it's just one of those things that you get by guessing and checking or reading stocks. Or something like that.
>> Brian Holt: And we're sending that with innerText, and we're getting that from input.value.

[00:07:12]
>> Brian Holt: So I wanted to show you change. So a change event happens whenever you unfocus an input. So I have this box right here, and I can type in here Three, three, three. Notice nothing has changed. I'm about to click off of it. So if I click off of it, then it changes the color.

[00:07:33] So it waits for what's called a blur event. So something focuses when I click on it, and it blurs when I click off of it. So if I come back in here and say, I don't know, lime green.
>> Brian Holt: Does that.
>> Brian Holt: My favorite color is peru. I don't know if you knew this, but peru is a color.

[00:07:59] That is the color of peru. I don't know where some of these come from.
>> Brian Holt: Medium sea green. Yeah, that's a color. [LAUGH] Or there's tons, there's dodger blue. If any of you are baseball fans. There's a bunch of them. And some of them are purely nonsensical. Or this one's a favorite, papaya whip.

[00:08:28]
>> Brian Holt: It's like this weird yellowish color.
>> Brian Holt: Right?
>> Brian Holt: Anyway, it's neither here nor there.
>> Brian Holt: Questions about events in general? You can put events on anything, right? So I could put a click event on a div, and that does work, right? So it's not tied, necessarily, to anything.

[00:08:54] What was the other thing I wanted to say about it? You can make your own events. That is not something I typically do. You can actually manually trigger events on a div, and then you can listen for that manually triggered event. So I could listen for Briansevent. And then, there's a way you can say on this div, trigger a briansevent on that event, on that div.

[00:09:15] It's not a very useful pattern, so I would not suggest doing it, but it is possible. Most of the time, you're just listening for browser events.