Transcript from the "Keyup Event" Lesson
[00:00:00]
>> Brian Holt: So I'm gonna show you another one with input tag, right? So something that I can type into and we're gonna be listening to key up events, okay? So key up event, as you might imagine is when I press the key, there is a key down event. And then as soon as I released the key up, there is a key event, okay, and listening to the key up event.
[00:00:21]
So if I type in here and say, typing something.
>> Brian Holt: As soon as I let up my fingers, if I would like hold my finger here, notice that it's not gonna do anything until I let my finger up.
>> Brian Holt: Reason being if I did key down on here, it would capture the event before the typing had been registered.
[00:00:42]
So I would be always one character behind, but sometimes that's what you want. So that just depends. So if you look, trying to listen to inputs, you'll listen for key up events. And here I'm just saying, paragraph and I'm saying the inner text is assign the input.value, right?
[00:01:05]
So the input.value which this input is this, it's the input to copy to which is referring to this one right here. Whatever the person has typed into it will always be captured inside input.value here.
>> Brian Holt: Or we actually could have done it this way, as well. So this takes in an event right here, right, and then I could have said event.target.value.
[00:01:38]
So the wherever the event is happening, right? So in this case, the event happens on this input right here. I can pull that off here off the event. So that's what the event.target is, right? It's where the event actually ended up happening. So it would be the input in this particular case and then I wouldn't have to have this part at all.
[00:02:05]
>> Brian Holt: And here I would say, documents.getelement or querySelector. QuerySelector was it called input-to-copy, input-to-copy.
>> Brian Holt: So now if I type that.
>> Brian Holt: That's weird, console. Part of that paragraph, either so console.log('event').
>> Brian Holt: Paragraph is not defined.
>> Brian Holt: Let's figure out what's going on with that.
>> Brian Holt: Paragraph right there, copy.
[00:03:12]
There we go. So now if it coming here, it still is working. There we go, okay?
>> Brian Holt: So that's another way you can do it is using this event right here, event.target.value. In fact, you'll probably see that quite frequently.
>> Brian Holt: Cuz what's nice. In fact, what I'm gonna show you, I think on the next one.
[00:03:36]
Nope, the second to last one is you can use one event listener for multiple different downloads. Right now, we have a one-to-one relationship. We have one event listener for one element like one tag, right? But we can actually use one event listener for many tags as well, which is pretty cool.
[00:03:53]
So it makes sense that whatever is getting typed into here is getting copied into this paragraph tag, right? And we're doing that by just overwriting the inner text here with the event.target.value
>> Brian Holt: Cool, so next thing here we're gonna be doing a change event. So a change event is like I've typed something into an input.
[00:04:14]
I'm not listening to the key up anymore. I'm listening for I've typed something in here. When the user then unfocuses that input, it's going to fire a change event. It's something changed, right? So notice if I type here like Peru, my favorite color, it hasn't changed yet, right, because I'm still focused.
[00:04:33]
You can see the blue outline there. That means I'm still focused on that input. However, if I click over here, it's gonna change the color right away. That's when the change event actually ends up happening.
>> Brian Holt: So this is useful for thing like validation, right? Like imagine that you're building a form and someone's filling out like their email address, right?
[00:04:54]
You wanna make sure that they have a valid email address. So as soon as there's a change event, you'll go through and make sure it's like is do they have an ad sign? Do they have like a dot com or dot CEO or net afterwards, right? You can do all that validation on the change event.
[00:05:07]
That's when that's gonna be useful to you.
>> Brian Holt: There's also rebeccapurple. That's another favorite one.
>> Brian Holt: Or mediumaquamarine. Think that's a color, it is. In case you're wondering that was medium aquamarine is, it's my favorite interview question to ask someone what's their favorite names CSS color. If they say Peru, they just get the job.
[00:05:38]
[LAUGH]