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>

测试：
jQuery中键盘事件的执行顺序
可以看到：

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

jQuery中键盘事件的执行顺序

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

事件

html code

相关推荐