Whenever a key is pressed or released, there are certain events that are triggered. Each of these events has a different meaning and can be used for implementing certain functionalities depending on the current state and the key that is being used.
These events that are triggered when a key is pressed are in the following order:
- keydown Event: This event occurs when the user has pressed down the key. It will occur even if the key pressed does not produce a character value.
- keypress Event: This event occurs when the user presses a key that produces a character value. These include keys such as the alphabetic, numeric, and punctuation keys. Modifier keys such as ‘Shift’, ‘CapsLock’, ‘Ctrl’ etc. do not produce a character, therefore they have no ‘keypress’ event attached to them.
- keyup Event: This event occurs when the user has released the key. It will occur even if the key released does not produce a character value.
Note that different browsers may have different implementations of the above events. The onKeyDown, onKeyPress, and onKeyUp events can be used to detect these events respectively.
Example: The below example shows different events that get triggered when a key is pressed in their respective order.
HTML
<body style="text-align:center;">     <h1 style="color:green;">         GeeksForGeeks     </h1>       <p>         <b>onKeyPress Vs. onKeyUp             and onKeyDown Events</b>     </p>       <input type="text" id="field" placeholder="Type here">     <p id="status"></p>       <script>         // Script to test which key         // event gets triggered         // when a key is pressed         var key_pressed =             document.getElementById('field');                   key_pressed             .addEventListener("keydown", onKeyDown);         key_pressed             .addEventListener("keypress", onKeyPress);         key_pressed             .addEventListener("keyup", onKeyUp);                   function onKeyDown(event) {             document.getElementById("status")                 .innerHTML = 'keydown: '                 + event.key + '<br>'         }         function onKeyPress(event) {             document.getElementById("status")                 .innerHTML += 'keypress: '                 + event.key + '<br>'         }         function onKeyUp(event) {             document.getElementById("status")                 .innerHTML += 'keyup: '                 + event.key + '<br>'         }     </script> </body> |
Output:
[…] This function is invoked by binding it to the events that cause interaction with the page. These include methods like onload, onmousemove, onmousedown, ontouchstart, onclick and onkeypress. […]