如何使用Vanilla JS监听动态生成input标签的enter回车按键事件

解决方案 #

你可以通过事件委托的方式实现需求，只需要在现有监听逻辑的基础上增加目标元素匹配的判断即可，以下是两种常用实现方式：

方案1：事件委托（推荐，适合批量动态生成的input） #

你可以先给动态生成的input添加专属标识（比如类名js-dynamic-input），再通过事件冒泡的特性匹配目标元素：

// 可替换为你确定不会被销毁的input上层父容器，性能更优
document.addEventListener('keyup', function(event) {
  // 仅处理回车键事件，使用标准的event.key替代已废弃的keyCode
  if (event.key !== 'Enter') return
  // 匹配目标动态input
  if (event.target.matches('input.js-dynamic-input')) {
    // 此处填写你的业务逻辑
    console.log('回车触发，输入内容：', event.target.value)
  }
})

方案2：生成元素时直接绑定事件（适合单个动态input场景） #

如果你是在JS中手动创建input元素，可以在创建时直接绑定事件：

// 创建input元素
const dynamicInput = document.createElement('input')
// 绑定keyup事件
dynamicInput.addEventListener('keyup', function(e) {
  if (e.key === 'Enter') {
    console.log('回车触发，输入内容：', this.value)
  }
})
// 将元素插入到DOM中
document.body.appendChild(dynamicInput)

注意事项 #

• 尽量不要将事件绑定到document上，优先绑定到离input最近的、不会被销毁的父容器，减少全局事件触发的性能损耗
• keyCode属性已经被Web标准废弃，使用event.key === 'Enter'的写法兼容性和可维护性更好

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