#47 Handling Keyboard Events | DOM & DOM Manipulation | A Complete JavaScript Course

in this lecture you will learn how to handle or how to respond to keyboard events in this section we learned a lot about Dome events like click of a button or focus of an input element Etc just like Dome events we can also handle events which happens on a keyboard using JavaScript we can also handle events which happens on a browser like scrolling up or down in browser tab or resizing browser window Etc but in this lecture we will keep our focus on learning keyboard events and we will we'll talk about browser events later in this course now there are three types of keyboard events key press event key up event and key down event so in this lecture let's understand how we can handle keyboard events by handling key down event let's go to vs code and here what we want is so whenever we are clicking on this calculate Emi button it is going to open this model popup now to close this model popup we need to click on this okay button right but what I also want is when this model popup opens I want to allow users to close this model popup by simply pressing enter key on the keyboard so when the user press enter key on the keyboard at that time also this model popup should close by itself okay now to handle keyboard events we still going to use the event handler mechanism which we have learned in our previous lectures so basically we are going to use the add event listener method to handle the keyboard events but the question is on which object we are going to call ad event listener method to handle keyboard events because if we want to handle events on a button element we call add event listener on that button when we want to handle an event on an input element we call add event listener method on that input element so where are we going to attach the add event listener method to listen for a keyboard event well keep in mind that keyboard events are so-called Global events because keyboard events do not happen on one web page element and that's why for Global events like keyboard events we usually listen for those events on the whole document so instead of listening on a specific web page we use add event listener method on the whole document in simple words if you want to listen for keyboard events or any Global event on the document object itself we are going to add event listener okay so here we are not adding an event listener on a Dom element instead we are adding this add event listener on the whole document on the whole web page and here the first thing which we need to specify is what event do we want to listen for now as I mentioned on the keyboard there are three events which happens key down event key press event and key up event key down event happens when the user presses a key down and key press event happens when the user presses a key now the difference between key down and key press event is that key down event can be handled for any type of key but when you do key press event key press event can only be handled for character Keys like numbers letters special characters Etc you cannot use key press event to handle the key press event on function keys like shift enter Etc so that is the difference between key press and key down key down can be used to handle any key down event which happens on any key but key press event can only be used to handle the events on the character Keys like numbers letters Etc it cannot be used on function keys and the key up event is the opposite of key down event so the key down event happens when you presses a key and key up event happens when you releases that key now you might ask in which scenario I can use key down event and in which scenario I can use key up event so let's say you are creating a game something like Counter Strike and what you want is you want to implement a functionality where as long as the space bar is pressed it is down you want to allow user to fire so it will continuously fire as long as the space bar is pressed so for that you will handle key down event and as long as the space key is down the user will keep on firing but as soon as you releases the space bar the key up event will happen and you want to handle that event and whenever that event event happens you want to stop firing so this is one simple use case I'm telling you where you can use key down and key up and key press event as I mentioned you can use key press event to read character keys so whenever you want to work with character Keys you can use key press event all right so here we are going to use key down event because here we want to handle key down event on Enter key or return key and this is a function key it is not a character key and since we want to handle event on a function key we are using this key down and not key press all right then here let's go ahead and let's assign a function now we have learned that whenever an event happens whether it is a dome event or keyboard event or scroll event whenever an event happens this call back function which we are passing here to this ad event listener method it is going to receive that event object in this case when we are handling this keydown event we are going to receive an event object for this keydown event and that will be assigned to this event parameter so let me go ahead and let me log that event just to show you what do we have in that event object okay let's save the changes let me open developer console and let me move it a little bit down okay let's close this let me also refresh the page okay now let's click on the web page first because as we have learned the keyboard events are Global events it happens on the document object so if I click inside this console then it will not listen for the keyboard events so that's why we need to click somewhere on the web page and now when I press control button you will see a keyboard event has happened as you can see and if I expand this keyboard event and here we will see some properties so basically you will see that the control key is pressed so this key will give you the type of key which has been keyed down so in this case I pressed control key so the keys is control and you can also see the key code which is 17 okay we also have other properties but we are not much interested in that but in future if you want to handle keyboard event in slightly different way you can go through these properties and you can check which one you can use in your scenario okay but here we are mainly interested in two things the key property and the key code property so this key code property is going to be unique for each key and this key is basically the name of the key for which the event is being handled okay so what we want is whenever the enter key is pressed so if I press enter key now and if I expand it you will see for that the key is enter and key code is 13 so whenever the enter key is pressed I want to close this model window and we are going to write that logic now so here first of all we are going to check if event. key if it is equal to enter okay as you can see the key is enter or here you can also use key code so let me actually use key code so if the key code is 13 so in this way also you can use it you can use key code then we know that Enter key is pressed so in that case we want to close this model window so for that what we are going to do is if I scroll up somewhere we writing the logic for closing that model window okay here we have that logic of closing the model window so what I'm going to do is let me go ahead and let me create this function outside because now we want to use this function at multiple places so I'll cut it from here and let me paste it here let's provide a name here and let's call it hide model okay and let's go ahead and let's call this hide model here save the changes let's go to your my calculator let's open the model window and when I click on this okay button it should close that model window so that functionality is working but now what we have done is we have moved that logic inside this hide model function so that we can use it at multiple places first we want to use it here and then we also want to use it when we are handling that keyboard event so here what we want is when the enter key is pressed at that time we want to call this hide model and what this hide model function is doing it is basically adding the hide CSS class to the model div so as you can see we are adding the hide CSS class to the model div okay so before calling this function we also want to check whether this model div already contains this height CSS class or not if this height CSS class is already added on this model div then we might not want to call this method because this method is simply going to add this hide CSS class on that model div so if it already contains that CSS class then we don't need to add it again right so here let's do a little bit more refactoring I'll cut this line from here and I will put it here where we are creating other elements where we are storing other elements okay and then now we can remove these lines because now we have model div on global level and then it can be accessed from anywhere in our JavaScript program so we don't need to access it again and again okay so now I'm going to use this model div in our call back function which we are passing for handling keyboard event so here I'm also going to check another condition so for that I'll use end and there we will check if the model div do classlist do contains so using this contains method we are going to check if this class list already contains the hide CSS class then we don't want to call this hide model function so here I'm going to use not operator basically here we are telling that if the class list does not contain this height CSS class so for that I have used this not operator this contains method it is going to return us true if this hide CSS class is present on this class list otherwise it will return us false so that's why I'm using this not operator only if the height CSS class is not not present in this class list then only we are going to call this hide model function okay with this let's save the changes and let's see if this functionality is working or not so let's go to Emi calculator let's open this model popup and when I press enter as you can see it has closed that model window and let me just show you that I have pressed inter by logging the key as well so let's say console. log event. key so we learned that this key is going to return us the key which has been pressed on the keyboard let's save the changes let's go to calculate Emi and now when I click on this calculate Emi it is going to open this model window and when I press enter it has close that model window and you can also see the key which has been pressed if I open it again and if I press some other key let's say shift nothing is happening because this model window will be closed only when the ENT key is pressed and we will also go inside this if statement only when the enter key is pressed because we are checking that condition so let me move this console.log statement outside of this if so that this statement will be executed every time a key is pressed on the keyboard let's save the changes again let's go to calculate Emi let's open the model popup and here when I press enter it is closed and you can also see inter logged here when I press maybe shift you see Shi shift is logged here but it has not closed this model window if I press some other key maybe some character key let's say d you can see D is logged here but it has not closed this model window this model window will close only when the enter key is pressed as you can see okay and previously we learned about add and remove method of this class list but here we also learned about this contains method which this class list have and it basically returns us whether a given CSS class class is present in that class list or not all right so this is all from this lecture in this lecture we learned how we can handle keyboard events and for that we have used this key code property of that keyboard event we can also use key property of the keyboard event but this is how we can handle keyboard events from our JavaScript code this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day e

Channel: procademy

Views: 238

Keywords: javascript, es6, es 2016, modern javascript, javascript tutorial, complete modern javascript course, procademy

Id: mZlXvDtvJq4

Length: 14min 8sec (848 seconds)

Published: Mon Jul 08 2024