this_parameter如何存储keydown事件的相关信息？

首先要纠正一个误区：你给函数参数起名this_parameter是不准确的，这个参数不是this关键字，而是浏览器自动传递的事件对象（Event），它包含了keydown事件的所有相关信息。

• 当你通过document.addEventListener("keydown", keyDraw)绑定事件时，浏览器在检测到键盘按下动作后，会自动创建一个KeyboardEvent对象（继承自Event），并把这个对象作为第一个参数传给你指定的回调函数keyDraw。
• 这个事件对象里存储的keydown相关信息包括：
  • key：按下的具体按键字符（比如"a"、"Enter"）
  • code：按键的物理编码（比如"KeyA"、"Enter"）
  • ctrlKey/shiftKey/altKey：是否同时按下了Ctrl/Shift/Alt键
  • keyCode：（已废弃但仍能看到）按键的数字编码
  • target：触发事件的DOM元素（这里是document）

你可以修改代码来查看这些具体信息：

document.addEventListener("keydown",keyDraw);

function keyDraw(event){
    console.log("按下的按键：", event.key);
    console.log("是否按住Shift：", event.shiftKey);
    console.log("事件触发源：", event.target);
}

另外补充：函数里的this（如果没被箭头函数或bind修改的话）在这里指向绑定事件的元素document，和这个参数是完全不同的东西，所以把参数命名为this_parameter很容易混淆，建议改成event或者e这类通用名称。

内容的提问来源于stack exchange，提问作者Elizardo Perdomo