jQuery中键盘事件keyxxx的执行顺序

怼烎@ 2022-02-28 19:46 192阅读 0赞

# jQuery中键盘事件keyxxx的执行顺序 #

## 事件 ##

`keydown(?fn)` 按下键帽时触发。  
`keypress(?fn)` 按下并松开同一个键帽会触发(必须是可打印的ASCII字符)。  
`keyup(?fn)` 松开键帽触发。

其中`fn`为`function(event) {...}`，是为每次该类型事件绑定的处理函数。  
若`keydown(fn)`的`fn`返回`false`，则`keypress`不会被触发，但`keydown`和`keyup`会被触发。

`event.charCode` ASCII码(数值)。  
`event.key` 返回ASCII字符(ABCabc等)。

## html code ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>jQuery-键盘事件</title>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
            $(function() {
                $(window).keydown(function(event) {
                    // 使用ES6的模板字符串，打印event对象的charCode和key属性值。
                    console.log(`keydown: ${event.charCode} ${event.key}`);
                });
                $(window).keypress(function(event) {
                    console.log(`keypress: ${event.charCode} ${event.key}`);
                });
                $(window).keyup(function(event) {
                    console.log(`keyup: ${event.charCode} ${event.key}`);
                });
            });
        </script>
    </head>
    <body>
        
    </body>
    </html>

测试：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]  
可以看到：

*  可打印的ASCII字符(如ABCabc123及标点符号等)  
    执行顺序为`keydown-->keypress-->keyup`。
 *  对于`Shift, Ctrl, Alt, Caps Lock, Window(Meta)及F12`等键位  
    依次触发`keydown-->keyup`(即`不会触发keypress`事件)。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]: /images/20220227/4300d9fa2da7406ab7927bb370ba4bd3.png