JS 监听 键盘按键 事件 以Enter键为例子

<think>好的，我现在需要帮助用户解决关于JavaScript中键盘Enter事件的使用方法的问题。首先，我要回想用户提供的引用内容，看看有没有相关的信息可以借鉴。根据用户给的引用，特别是引用[3]，里面提到了通过Vue.js监听Enter键的事件，使用keyCode 13来判断。这可能是一个有用的例子。 接下来，我需要整理常见的Enter事件使用方法。用户可能想知道如何在纯JavaScript中实现类似的功能，而不仅仅是Vue。根据知识库中的引用[1]，KeyboardEvent对象有key、code和keyCode属性，虽然keyCode已经被废弃，但可能还在使用。需要提到推荐使用key属性，比如event.key === 'Enter'。 然后，用户可能需要不同的场景下的示例，比如表单提交、动态添加元素后的监听等。引用[2]中的例子使用了addEventListener，可以展示如何绑定事件到输入框。同时，引用[1]中的KeyboardEvent.repeat可能相关，但用户的问题主要是关于Enter键，所以可能不需要深入讨论重复触发的问题，但可以简单提到。 另外，要注意用户可能的错误，比如使用keyCode时的兼容性问题，或者事件绑定的方式（比如onkeypress与onkeydown的区别）。需要指出这些注意事项，帮助用户避免常见错误。 最后，根据用户的要求生成相关问题，可能涉及其他按键事件、阻止默认行为或事件委托等。需要确保问题相关且有帮助。</think>### JavaScript 中键盘 Enter 事件的使用方法 #### 1. **基础用法：通过 `keydown` 或 `keyup` 监听事件** 在输入框或可交互元素中，可通过监听 `keydown` 或 `keyup` 事件，判断按下的键是否为 **Enter（回车键）**。 - **推荐方式**：使用 `event.key` 属性（值为 `"Enter"`）[^1]。 - **兼容性备用方式**：使用 `event.keyCode === 13`（已废弃但广泛支持）或 `event.code === "Enter"`[^3]。 **代码示例**： ```javascript document.getElementById("inputBox").addEventListener("keydown", function(event) { if (event.key === "Enter") { // 推荐方式 console.log("Enter键被按下"); // 执行逻辑（如提交表单） } }); ``` --- #### 2. **表单提交场景** 在表单中按 Enter 键时，浏览器默认会触发表单提交。若需自定义行为，可通过以下方式拦截： ```javascript document.querySelector("form").addEventListener("keydown", function(event) { if (event.key === "Enter") { event.preventDefault(); // 阻止默认提交行为 customSubmit(); // 调用自定义提交函数 } }); ``` --- #### 3. **Vue 框架中的实现** 在 Vue 中可通过 `@keyup.enter` 修饰符简化操作[^3]： ```html <input @keyup.enter="handleEnter" /> ``` ```javascript methods: { handleEnter() { console.log("Enter键触发"); } } ``` --- #### 4. **动态元素的事件绑定** 若元素是动态生成的，需通过事件委托绑定监听： ```javascript document.body.addEventListener("keydown", function(event) { if (event.target.matches(".dynamic-input") && event.key === "Enter") { console.log("动态输入框的Enter事件"); } }); ``` --- #### 注意事项 - **事件类型选择**：`keydown` 在按下时触发，`keyup` 在松开时触发。若需阻止默认行为（如表单提交），需使用 `keydown`[^1]。 - **兼容性**：`keyCode` 已废弃，但部分旧代码仍在使用；`key` 和 `code` 是现代浏览器的标准属性[^1]。 ---