JavaScript回车事件等键盘事件

JavaScript键盘事件

在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型：
1）keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会禁止keypress 事件响应）。
2）keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。
3）keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

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

键盘事件属性

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

ctrlKey 和 shiftKey 属性可存在于键盘和鼠标事件中，表示键盘上的 Ctrl 和 Shift 键是否被按住。下面示例能够监测 Ctrl 和 Shift 键是否被同时按下。如果同时按下，且鼠标单击某个页面元素，则会把该元素从页面中删除。

document.onclick = function (e) {
	//标准化事件对象
    var e = e || window.event;  
    //获取发生事件的元素，兼容IE和DOM
    var t = e.target || e.srcElement;  
    //如果同时按下Ctrl和Shift键
    if (e.ctrlKey && e.shiftKey) {  
    	//移出当前元素
        t.parentNode.removeChild(t);  
    }
}

keyCode 和 charCode 属性使用比较复杂，但是它们在实际开发中又比较常用，故比较这两个属性在不同事件类型和不同浏览器中的表现时非常必要的，如下表所示。读者可以根据需要有针对性的选用事件响应类型和引用属性值。

某些键的可用性不是很正确，如 PageUp 和 Home 键等。不过常用功能键和字符键都是比较稳定的，如下表所示：

键盘响应顺序

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

JavaScript 监听回车事件

某些时候我们需要监听回车按键从而实现某些功能，例如回车键登录等。

$("#loginListen").bind("keydown", function (e) {
	//兼容浏览器的事件
    let theEvent = e || window.event;
    //兼容各浏览器的键盘事件
    let keyCode = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (keyCode == 13) {
        console.log("回车执行");
        $("#loginOp").click();
        //当然也可以禁止回车事件
        //theEvent.keyCode = 0;
        //theEvent.returnValue = false;
    }
})

a） $("#loginListen") 表示获取id为loginListen的标签元素，这是jQuery的写法，所以在使用时项目中需要先安装jQuery。
b） bind(“keydown”, function (e)｛…｝）,表示绑定keydown事件。
c） keyCode == 13表示回车事件。
d） $("#loginOp").click();表示id为loginOp的标签点击事件，这个标签一般来说为按钮。

Keycode对照表

参考：JS键盘事件