JS键盘事件

在 JavaScript 中，当操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型：

• keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作
• keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。
• keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

当获取用户正按下键码时，可以使用 keydown、keypress 和 keyup 事件获取这些信息。其中 keydown 和 keypress 事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用 keypress 事件获取按键信息。所有元素都支持键盘事件，但键盘事件多被应用在表单输入中。

获取键盘响应事件类型及对应的键值。

<input id="input" type="text"></input>
var input = document.getElementById("input");
    input.onkeydown =fun;  //注册keydown事件处理函数
    input.onkeyup = fun ; //注册keyup事件处理函数
    input.onkeypress = fun;  //注册keypress事件处理函数
    function fun (e) {
        var e = e || window.event;  //标准化事件处理
        var s = e.type + " " + e.keyCode +" "+ e.code;  //获取键盘事件类型和按下的值
       	console.log(s)
    }

键盘事件的属性

键盘定义了很多属性，如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是 ctrlKey 和 shiftKey 属性除外，因为它们可以在事件中存在。例如，当按下 Ctrl 或Shift 键时单击鼠标操作。

属性	说明
keyCode	该属性包含键盘中对应键位的键值
charCode	该属性包含键盘中对应键位的 Unicode 编码，仅 DOM 支持
target	发生事件的节点（包含元素），仅 DOM 支持
srcElement	发生事件的元素，仅 IE 支持
shiftKey	是否按下 Shift 键，如果按下返回 true，否则为false
ctrlKey	是否按下 Ctrl 键，如果按下返回 true，否则为false
altKey	是否按下 Alt 键，如果按下返回 true，否则为false
metaKey	是否按下 Mtea 键，如果按下返回 true，否则为false，仅 DOM 支持

一些快捷键就时根据这些属性设计的

ctrlKey 和 shiftKey ，表示键盘上的 Ctrl 和 Shift 键是否被按住。下面示例能够监测 Ctrl 和 Shift 键是否被同时按下。如果同时按下，且鼠标单击某个页面元素，把起背景颜色改变

	.box{
				width: 100px;
				height: 100px;
				background-color: red;
			}

		<div class="box">
			
		</div>

document.onclick = function (e) {
    var e = e || window.event;  //标准化事件对象
    var ele = e.target || e.srcElement;  //获取发生事件的元素，兼容IE和DOM
    if (e.ctrlKey && e.shiftKey) {  //如果同时按下Ctrl和Shift键
      ele.style.backgroundColor="red"  //改变当前元素的颜色
    }
}

键盘响应顺序

当按下键盘时，会连续触发多个事件，它们将按如下顺序发生。
对于字符键来说，键盘事件的响应顺序：keydown → keypress → keyup。
对于非字符键（如功能键或特殊键）来说，键盘事件的相应顺序：keydown → keyup。
如果按下字符键不放，则 keydown 和 keypress 事件将逐个持续发生，直至松开按键。
如果按下非字符键不放，则只有 keydown 事件持续发生，直至松开按键。