正确写法是<input onkeydown="handleKey(event)">，需显式传入event参数；推荐用addEventListener以支持多监听器、避免覆盖，并注意Enter键需e.preventDefault()阻止表单提交。
onkeydown 事件绑定在 input 上的正确写法
直接在 <input> 标签里写 onkeydown 是最常用也最容易出错的方式。它确实能触发，但要注意：事件对象默认不传入，必须显式写 event 参数才能拿到按键信息。
常见错误是写成：<input onkeydown="handleKey()">——这样 handleKey() 函数里拿不到 event，也就无法判断按的是哪个键。
正确写法是：
<input onkeydown="handleKey(event)">
对应 JS 中：
立即学习“前端免费学习笔记（深入）”；
function handleKey(e) {
console.log(e.key); // 按键字符，如 "Enter"、"a"、"ArrowUp"
console.log(e.code); // 物理键位，如 "Enter"、"KeyA"、"ArrowUp"
console.log(e.keyCode); // 已废弃，别用
}
为什么推荐用 addEventListener 而不是 onkeydown 属性
因为 onkeydown 是 HTML 属性，只能绑定一个处理函数；一旦多次赋值（比如不同模块都试图改它），后写的会覆盖前写的。而 addEventListener 支持多个监听器共存，更符合现代开发习惯。
实操建议：
- 用
document.getElementById("myInput").addEventListener("keydown", handler)替代内联写法 - 如果要移除监听（比如组件卸载时），必须保留 handler 函数引用，不能传匿名函数
- 注意：
keydown在输入法组合过程中也会触发（比如中文输入法打“nihao”还没上屏时就可能触发多次），如需过滤，得结合e.isComposing判断
捕获 Enter 键和阻止表单提交的典型场景
很多表单希望用户按 Enter 就提交，但又不想页面刷新。这时候 onkeydown 是入口，但关键在「阻止默认行为」。
常见错误是只 return false 或漏掉 e.preventDefault()，结果还是跳转或刷新。
正确做法：
function handleKey(e) {
if (e.key === "Enter") {
e.preventDefault(); // 必须加这句，否则 form 会默认提交
doSubmit(); // 自定义提交逻辑
}
}
补充说明：
-
e.key === "Enter"比e.keyCode === 13更可靠，兼容性好且语义清晰 - 如果 input 在
<form>内，且没阻止默认行为，浏览器会自动触发表单提交 - 移动端软键盘的「搜索」「发送」按钮，多数也映射为
key === "Enter"，可一并捕获
keydown、keypress、keyup 的选择误区
很多人混淆这三个事件。onkeydown 是按下任意键就触发（包括 Ctrl、Shift、Delete），onkeyup 是松开时触发，而 keypress 已被标准弃用，不要用。
实际选型建议：
- 想拦截输入（比如禁止输入数字）→ 用
keydown+e.preventDefault() - 想读取最终输入字符（比如实时搜索）→ 更适合用
input事件，它在值真正变化后触发，不受按键组合干扰 - 需要区分长按重复触发（如方向键连动）→
keydown天然支持，但要注意e.repeat属性可识别是否为重复触发
最常被忽略的一点：keydown 不反映输入法最终上屏内容，它反映的是物理按键行为。要拿用户真正输入的文本，请监听 input 事件，而不是依赖 keydown 解析。
