JavaScript 中的 onKeyPress onKeyUp 和 onKeyDown 事件

在 JavaScript 中，每当按下或释放某个键时，都会触发某些事件。这些事件中的每一个都有不同的含义，可用于实现某些功能，具体取决于当前状态和正在使用的密钥。

按下某个键时触发的这些事件按以下顺序排列：

• keydown 事件：当用户按下键时发生此事件。即使按下的键没有产生字符值，它也会发生。
• keypress 事件：当用户按下产生字符值的键时会发生此事件。这些包括诸如字母键、数字键和标点键之类的键。诸如“Shift”、“CapsLock”、“Ctrl”等修饰键不会产生字符，因此它们没有附加“keypress”事件。
• keyup 事件：当用户松开按键时发生此事件。即使释放的键没有产生字符值，它也会发生。

请注意，不同的浏览器可能对上述事件有不同的实现。 onKeyDown 、 onKeyPress和onKeyUp事件可分别用于检测这些事件。

下面的例子 显示按各自顺序按下某个键时触发的不同事件。

例子：

HTML

  

    
        GeeksForGeeks
    
  
    
        onKeyPress Vs. onKeyUp
            and onKeyDown Events
    
  
    
    
  
    
        // 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>'
        }
    

  

输出：