All language subtitles for 170 Using Keyboard Event Listeners to Check for Key Presses.en_US

Now if we wanted our web site to not just detect button presses but also to detect keyboard key presses

to activate the relevant drum,

say if I press the w key then it should activate this drum and if I press j then it should activate

the snare,

then how exactly do we do that?

Now instead of adding an event listener to listen for clicks we can listen to a key press event instead.

So we would write something like addEventLlistener("keypress"), and notice that the weird thing about

events is that they're named all in lower case, and it's a good idea to take a look at the docs whenever

you're trying to type them because it's pretty counter-intuitive.

So we're going to try and target this keypress event, and if there was a key press, then we'll simply

call an anonymous function which sends an alert that says "Key was pressed".

So but the problem is what exactly do we add this event listener to, right?

Because previously we added our event listener to all of the buttons, so that when the buttons get pressed

then the event listener gets triggered.

But in this case we're kind of waiting for the keyboard keys.

So how do we add an event listener to the keyboard?

Well you don't have to.

You can add an event listener to the entire document, so that the entire web page starts listening for

keyboard strokes.

So now let's hit save and let's refresh our page, and if I tap on any of the keys on my keyboard then

I get the alert that says "Key was pressed".

Now the next problem is how do we figure out which key was pressed

exactly.

Now remember how we said that when we add an event listener to an element then once the event happens

the element will trigger the function that's in the second parameter.

So in this case when a key press is detected it will trigger the function that tells the browser to

show an alert.

Now when that function gets triggered, there's also the option to pass in a parameter,

and we can call that parameter event or e,

but essentially what it allows us to do is it lets us tap into the event that triggered the event listener.

So instead of showing an alert, let's console.log this event and see what we get back.

So now if we refresh our page and we press any key then you can see that what's logged in here are the

keyboard events that triggered the event listener.

So if you expand this you can see that it actually gives you a whole bunch of information including

the key that was pressed to trigger the event,

other things such as the key code, the character code, and a whole bunch of other things.

So you can see that whenever I press any key on the keyboard this event tells me which key was pressed.

And that's kind of what we need in order to get our drum kit going,

right?

And if you look in the docs for the keypress events, then you can see that they have a whole bunch of

properties that we saw in the Chrome Developer Tools, and you can read about what each of them do by taking

a look at the MDN docs.

Now the key that we're most interested in is this one called key and this is the key value represented

by the event,

so which key on the keyboard got tapped essentially.

And this is what we need in order to figure out which sound to play.

So notice how we already have this switch statement which checks to see which key was passed in and

responds by playing the relevant sound.

Now the problem is that this is all inside the event listener for our button clicks.

So as a challenge I want you to create a function that takes a character and checks it against the switch

statement in order to play the correct sound,

and then we're going to call it inside the event listener for the key press as well as the

event listener for our drum buttons.

So pause the video and see if you can complete this challenge.

All right.

So the first thing we're going to do is we're going to create this brand new function and I'm simply

going to call it makeSound. And it's going to take a single parameter which is going to be the key.

Now inside this function I'm going to relocate our switch statement.

So I'm just going to cut it and then I'm going to paste it inside my function makeSound. Instead of

switching on the buttonInnerHTML,

I'm going to switch on this key, and I'm going to pass in that key by calling makeSound, passing in the

buttonInnerHTML, which is essentially the innerHTML of the button that got pressed.

But I'm also going to do the same thing down here.

So I'm going to get rid of the console.log, and instead we're going to call makeSound, and I'm going

to use the event.key.

So now I have one section of my code which is all about detecting button press and then I have another

part of my code which is all about detecting keyboard press, and if a button was pressed and then I check

the innerHTML of the button that got pressed and send that to makeSound in order to play the relevant

sound,

and if a key press was detected instead then I send the event.key, so the key property of the event.

So say if I press on the w button, then it's makeSound(w), and if I press on the w key on the keyboard it's

also makeSound(w), and they end up in here where we switch based on that key parameter.

And then we play the relevant sound depending on which key was passed in.

So let's save this and see if it works.

So first I'm going to check by clicking on my buttons. Seems to work.

And now I'm going to try and type in the characters.

Awesome, right?

So in this lesson we learned about how you can add event listeners to detect keyboard strokes and we

used the same method, addEventListener,

but we added it to the entire document instead of a specific button or a specific element.

And once that was detected then this function gets called passing in the event that triggered the key

press, and that event contains a property called key, which tells us which keyboard key was pressed.

And then we send that over to our function makeSound in order to make the sound that we want for that

key.

Now in order to fully understand this part of the code we have to understand how in Javascript we can

pass functions as parameters.

We can also have functions as callbacks which include things that we get back after the event has happened.

So in the next lesson we're going to explore some of those concepts in more detail so that we can really

get to grips with what exactly it is that we're writing here.

So for all of that and more, I'll see you on the next lesson.