如何在JavaScript中为回车键添加EventListener？验证文本框回车触发newNote函数的代码是否正确

嘿，我来帮你梳理下这个问题～

首先，你的代码是正确的！ #

这段代码的逻辑完全能实现你想要的功能：监听ID为note的文本框的keypress事件，当用户按下回车键时调用newNote()函数。不过有几个细节可以留意下：

• 要确保eventListeners()函数在DOM元素加载完成后执行，不然document.querySelector("#note")可能找不到目标元素，导致事件监听绑定失败。比如可以这样做：

  document.addEventListener('DOMContentLoaded', function() {
    eventListeners();
  });
  

• 如果你的文本框在表单<form>标签内，按下回车默认会触发表单提交（页面刷新），这时候需要添加e.preventDefault()阻止默认行为，避免打断newNote()的执行：

  function eventListeners(){
      document.querySelector("#note").addEventListener("keypress", function (e){
          if (e.key === "Enter"){
              e.preventDefault(); // 阻止表单默认提交行为
              newNote();
          }
      })
  }
  

如何在JavaScript中为回车键添加EventListener #

根据不同的使用场景，有几种常见的实现方式：

1. 给单个元素添加（比如你的文本框） #

就是你采用的方式，监听元素的键盘事件，判断按键是否为回车键。除了keypress，也可以用keydown或keyup事件（keydown在按键按下时触发，keyup在按键松开时触发，按需选择）：

// 用keydown的示例
document.querySelector("#note").addEventListener("keydown", function (e){
    if (e.key === "Enter"){
        // 执行你的逻辑
        newNote();
    }
})

2. 全局监听回车键（整个文档范围内） #

如果想在页面任何地方按下回车都触发逻辑，可以给document绑定事件：

document.addEventListener("keydown", function(e) {
    if (e.key === "Enter") {
        console.log("全局范围内按下了回车键");
        // 执行你的自定义逻辑
    }
});

3. 兼容旧浏览器的写法（可选） #

虽然现在e.key已经是标准API，但如果需要兼容一些旧版本浏览器，可以补充keyCode的判断（回车键的keyCode是13）：

if (e.key === "Enter" || e.keyCode === 13) {
    newNote();
}

内容的提问来源于stack exchange，提问作者Amir Rezaie