1.为什么不推荐使用keyCode？对于这个问题的答案，说实话我找了很多资料，也没有一个特别明确的答案。早年听过一种说法，用户可能会自定义键盘，导致keyCode不准确。然而，这次搜索并没有发现任何类似的东西。MDN上的解释是对打印字符不友好。我在想以下可能的含义：1.不同的字符共享keyCode键盘上有很多键同时对应两个字符，比如“<”和“>”。都在一个键上，还有数字键（1!,2@,3#,4$,5%,...）都是一个键对应多个字符，如果要输入两个字符，往往需要按住Shift键，如字符“<>!@#$%^&*()...”等字符输入。keyCode值跟随的是键盘，而不是字符内容，即当我们输入“<”、“>.”等字符时，返回的keyCode值是一样的，需要判断用户是否按下了PressShift键知道输入的是哪个字符。这是很啰嗦的。例如：window.addEventListener('keydown',function(event){console.log(event.keyCode);});然后在页面输入字符“.>”，会看到输出的keyCode值都是一样的190，如下截图所示：明明是两个不同的字符，但是输出的keyCode值是同样，这对开发不友好。2、同一个键不同的keyCode，比如全键盘中的数字键，按住Shift键输出其他内容，比如下图数字小键盘。,例如小数点字符'.'在右下角也有Del键的能力。这时候按下这个键和Shift+按下这个键的keyCode值是不一样的。然后大家会发现按'.'返回的keyCode是110，加了一个Shift键后，返回的keyCode变成了46，这个很蛋疼，因为上面同一个键返回的是同一个keyCode，这里突然变了，同一个键返回了不同的keyCode。3.相同字符不同keyCode还没有完成。Shift+'.'返回的keyCode是直接按delete键的keyCode值。给人的印象是只要最终的行为或字符输出相同，keyCode值也应该相同。事实上，它不喜欢这样。即使输入相同的字符，也可能是不同的keyCode值。这里大家注意下图中右上角的加号和减号。同时最上面一排数字键上有加号和减号，如下图：此时分别按下这两个键，你会发现输出的字符是完全一样的，但是keyCode值不同，如下面的截图所示。上数字小键盘上破折号的keyCode是189，而数字小键盘上减号字符的keyCode是109，其实这两个字符是完全一样的。试想一下，如果在开发过程中判断用户是否按下了一个连字符，并且通过keyCode来判断，是不是很容易出bug？其他几个号码可能也有类似的问题。比如数字键盘输出的1-9的keyCode值和键盘上面1-9数字的keyCode值是不一样的。4、中文输入法的标点keyCode相同。比如输入框是中文输入法。此时字符",.;'【]-="的keyCode全部返回229，没法继续玩了。向上。可能因为上面提到的4种keyCode对打印字符不友好，不推荐使用keyCode。当前规范建议使用event.code或event.key。2、event.code和event.key的区别event.code表示按下的是哪个物理键，键盘上的每个键对应一个唯一的event.code值，用大写英文单词表示。event.key表示具体输入的字符内容，如果是非打印字符（如Enter键、Esc键、Shift键、Alt键等），则返回具体非打印字符的英文名称，如果输入内容与输入法相关，则返回FixedProcessname。为了方便大家快速了解区别，我挑选了几个有代表性的按钮，整理了一张表格，展示了不同按钮下event.code和event.key的值。keyCodevaluecodevalue键值说明49'Digit1''1'上数字键1按97'Numpad1''1'Numpad数字键1按左边的Shift键16'ShiftLeft''Shift'16'ShiftRight''Shift'右边的Shift键190'Period''.'主键盘中的点符号110'NumpadDecimal''.'数字键盘中的小数点符号229'Period'主键盘中的点'Process'中文输入法下符号229'Minus''Process'主键盘'-'符号下中文输入法189'Minus''-'主键盘'-'符号109'NumpadSubtract''-'数字小键盘中的'-'符号对于英文场景，只需要使用event.key就可以知道键盘输入的内容。但如果是中国场景，情况就复杂多了。在中文输入框打开的场景下，如果按钮内容与非中文输入法不同，则event.key的返回值是一个固定的Process，表示输入的字符内容和原来的键盘对应的内容已经处理完毕。例如，主键盘中的字符点是.默认情况下，但如果是中文输入框，字符点是句点，而键盘上根本没有句点字符，说明该字符点已经被输入法处理过，所以返回的是Process。这样一来，在中文输入法场景下，用户或者开发者都无法知道应该输入什么键。即使使用event.code也不起作用。有些人可能会反驳说event.code返回的是'Period'，意思是点键被按下了。此时event.key为'Process'，可以判断输入的是句号。理论上是可行的，但实践起来比预想的要麻烦，而且不可重现。麻烦的是，如果用户输入这个符号"，也就是正确的书名，event.code返回'Period'，event.key也返回'Process'。还需要开发者判断是否event.shiftKey为true，表示是否按下了Shift键。而且，如果换成其他语言的输入法，按'period'键返回的句号不一定是句号。可复现性差的地方在于中文输入法常用空格或回车表示选择，此时event.code为Space或Enter，event.key的值为Process，无法判断输入的是什么。所以event.code和event.key不适合中文输入法下的输入判断。幸运的是，在实际开发中，很少有场景需要提前知道用户是否启用了中文输入法。更多的是一些功能键的判断。比如空格键，回车键，删除键，上下左右键，上下翻页键，home/end键，ESC键等等。所以接下来我会列出event.key和event.code值对应以下常用功能键。3.常用功能键的键值功能键的键值比较实用，所以显示在最前面。详见下表：keynameevent.keykeyCodevalueenterEnter13deletedeleteDelete46backspacebackspaceBackspace8esccancelEscape27tabindexTab9upArrowUp38downArrowDown40leftArrowLeft37rightArrowRight39pageDownnextpagePageDown34pageUppreviouspagePageUp33homekeyHome36endkeyEnd35shift.keyShift16altbolkeyEltkeyControl按键的兼容性该值优于KeyboardEvent.code值，如下图：IE浏览器勉强支持，返回值可能与规范中定义的不同。如果想兼容IE浏览器，可以暂时使用keyCode属性进行兼容。4、常用功能键的代码值如下表所示。大部分返回值和键值一样，因为都是功能键。如果是可打印字符，则code值和key值是完全不同的东西：keynameevent.codeDescriptionEnterEnter–deletedeleteDeleteShift+NumpadDecimal可能还会删除backspaceBackspaceBackspace–esccancelEscape–tabIndexTab–UpArrowUp38DownArrowDown40LeftArrowLeft–RightArrowRight–pageDown下一页PageDown–pageUp上一页PageUp–home键Home–end键End–shift键ShiftLeft/ShiftRight–控制键ControlLeft/ControlRight–alt键AltLeft/AltRight–兼容性如截图所示下图：5.送你一朵小红花，除了event.keyCode推荐使用event.which，不推荐，官方名称是KeyboardEvent.which。虽然不推荐，但据我了解，浏览器有99%的概率会继续支持，因为如果去掉这些API特性，全球至少会爆发数百万的网站开发者。当然，如果条件允许（不考虑IE浏览器），我们还是优先使用event.key或者event.code来识别击键。另外，与原来的event.keyCode或eevent.which相比，event.key和event.code更易于使用。例如，我总是记不住上、下、左、右键的数字。我总是运行它看看这个值是多少，但是如果是event.key，直接使用语义英文单词就可以了。你只需要记住单词规则，首字母大小，每个分词首字母大写就可以了。OK，以上就是本文的全部内容。加深了自己对键盘事件的理解，整理了几个常用功能键的表格。我将在以后的开发中使用它。MDN上的表格真的很长，不适合实际使用。这篇文章估计不会有多少人分享。不管怎样，还是送你一朵小红花，谢谢你的阅读和支持！
