So I know it usually seems like it's all mouse events, click events, but there are keyboard events
as well that you can listen to and typically these are listened on all of the document.
But you can also listen to them individually on elements such as input fields as well as elements when
they are in focus that the user is clicking their keyboard.
So there are ways to track these events.
So there's a key down and a key up event listener.
There's an example of it here where we can track all of the key process.
So first we create an object called keys with arrow up, arrow down.
So all the key names set to false.
And then whenever the key is pressed, then we change those to true and we can output all of the keys.
This is one way how you can track keyboard events.
They have some examples here, of course, and more information about it.
So basically what we're doing is we're listening for the key down event.
And if the key down is it checks to see if it's a certain key code and if it is that key code, then
it runs some code.
Otherwise it does this.
So in this case, it's actually returning the function.
So if it is any one of these values, then it simply returns it back.
Otherwise it's going to run some code.
So we also have another example here where we're adding event listener.
So log key.
And what it's doing is it's logging the key information out into the element that has the idea of log.
So this is also a very useful example.
And the other example, of course, is the opposite.
So that's key down and this is key up and this occurs when the key is released.
So when somebody is releasing their key, then it's going to track this.
And that's why it's ideal within this type of situation where we're tracking key presses.
So we know that once the key has been let off, then we know that the Keys object will change and reflect
those changes for the user within their key changes.
So we can add these key presses to specific elements like inputs detecting if an input field is key
down.
And if it is, then we can do something with it.
We can check the length of the content within the value so we can change the background color to read
if it's over five characters, otherwise it will be white.
We can also listen for key code 13 and I'll show you a little bit more about key codes and how they
reflect to the different key values.
So 13, I believe, is the enter key.
So if it's enter key and the element value length is greater than one, then we're going to update the
color to yellow of that unordered list, that element that's been selected.
So let's open up the editor and we're going to try some of these examples, set it up so we'll set up
our keys object and this will track all of the key process.
So we've got we don't actually have to have anything in here.
This could just be a blank object.
And then on the document, we're adding an event listener.
And the event that we're listening for is key down.
And whatever the key is pressed, we can say press key on function and we'll set those functions up
afterwards.
So key up.
So this is when the key is released.
So basically it's off and creating those functions.
So we've got press key on function and it's taking that event information.
So taking the event object and will console log out that event object.
And the particular value that we're after is the key event.
And I'm also going to do one for the key off so that we can try this and I'll show you a little bit
more about it.
So now when we refresh and if I press any of the keys, I see I have a keyboard event and within this
event object, I can determine what key was pressed.
So I've got a key that was pressed.
So that's the key.
But to be more accurate, the key code is the one that you can use as well as you can track.
The different types, as well as which which gives you also a number of value that relates to what was
pressed on the keyboard.
So we've got all of this information that we can use and which and key code are usually the same.
And although most of the time you're going to see which being used, you can use key code as well.
And then you can see that it's key down so we can track all of the keys that are being pressed at any
given time by taking in the event key value, which will give us exactly the key that was pressed on
the keyboard.
And then this will give us the key that was released.
So now if I type some letters, I can see the letters being output into the console.
There's also the event prevent default.
So what this does is this is a method in JavaScript that prevents default action on particular elements
that might already have or events that already have some type of action associated with it.
So in this case, we want to prevent the default because we don't actually need the key.
We're not tracking anything within an input field.
So we're preventing the default action of that.
So it's always a good idea to remove it, although most of the time it's fine.
It will run without removing it.
And then now within the Keys object, we're going to take our event key and we'll just set those to
true.
And then when it gets released, we can set it to false.
So at this way, any time we look at the keys object in the console and I'm going to get rid of these
ones because we don't need to track it anymore.
So any time we can look at that, you can see which keys are being pressed.
So you can see that now I'm holding down more than one key.
All the keys that I'm holding down are being shown.
And as I release them, they go to force.
This is a quick way to track the keys that are being interacted with and pressed.
There's also adding event listeners to particular inputs.
So.
So you had to do that to accommodate all of this blockquote out.
So it's not interfering with our new code and I'll refresh that to clear it.
So ready to have an input on the page.
That's the input that's down here at the bottom.
So you can barely see it.
But it's tiny little input there.
So if we want it to track what's happening within that element, within the input element, we can track
that as well.
So taking context and this will be the element that we're going to be using.
So using the document and query select and now I always use query selector, but it is my favorite one
to use.
We're going to be tracking the input element and if you add more than one input element, you can go
by its name if you wanted to, so you can bracket the name.
But in this case, I only have just the one.
So that's fine.
We're going to add that.
And then on the elements, we're going to add an event listener and this event listener is going to
be listening for key press.
And when the key gets pressed, we're going to fire off at item function.
Let's set up an item.
And if you're wondering how we pass in the event object, you're going to see that the event object
is going to get passed in.
So all we have to do is add it in as a parameter within the function.
So now whenever I press the keyboard, you see that it triggers this add item so we can get the element
value as well.
So there was a we also saw that there's a number of ways to get that and we can also use L as well.
So that was one that we didn't see and L value will return back the element value.
Or we could use this, but depending maybe we want to add this function to other elements that might
not be the one that's invoking the function.
So there's always a different way to do that.
So let's take the value.
And if you wanted to set up the value of any of the elements, the document query selector, select
the each one and we'll update its text content with whatever the content of the element is the element
value.
So you can see that's going to be a really neat effect.
When I refresh anything I type into this input field is going to show within the H1.
So let's check to see the element value length.
And if this condition is if element value length is greater than five, we're going to update that element
style background color and let's set it to red.
So I don't want it to go over five and otherwise.
So if it's not over five, then we're good.
We'll set it back to white.
So this will give us an option to kind of always have it at white.
And then when we do go over the set amount, we can set it to red.
So let's start typing.
And as soon as we go over five characters, it goes red.
So that's one way to track that.
And there's also one other thing that we did want to cover.
So if we're listening for the event code and if we're listening for 13, so that means that that's the
enter key that's been pressed on that input.
And then we could take that element value length and make sure that it's at least that there's some
content there over.
And if it is, then we can take the elements.
Or how about we pick each one again and we'll update its style, background, color, and we'll set
the background color to yellow.
So we're typing in some content.
And then I press the turkey and you see that the background color goes to yellow.
So that's how we can affect the different colors.
So there is a challenge for this lesson and words.
That's coming up in the next video.