JS入门求助：输入事件为何触发两次？

问题原因 #

你把input事件的监听器写在了keydown事件的回调函数里，每按一次键盘就会给myForm新增一个input监听器。按几次键盘，就会有几个重复的监听器，每次输入触发input事件时，所有已绑定的监听器都会执行，所以控制台日志会多次输出。

修正后的代码 #

JavaScript代码

const myForm = document.querySelector('#my-form')
const myArea = document.querySelector('#text-A')

// 将input事件监听器放在外层，只绑定一次
myForm.addEventListener('input', function(a) {
  console.log(a.currentTarget)
})

myArea.addEventListener('keydown', function(a) {
  if (a.which == 13) {
    if (!a.shiftKey) {
      a.preventDefault();
    }
  }
})

HTML代码

<html>
<head>
  <link rel="stylesheet" href="test.css">
  <script defer src="test.js"></script>
</head>
<body>
  <form id="my-form">
    <!-- textarea不需要type="submit"属性，已移除 -->
    <textarea id="text-A" name="text-A"></textarea>
  </form>
</body>
</html>

补充说明 #

• 事件监听器只需要绑定一次，不要在另一个事件的回调里重复绑定，否则会累积多个相同的监听器，导致事件触发多次。
• <textarea>标签没有type属性，之前的type="submit"是无效的，直接移除即可。

内容的提问来源于stack exchange，提问作者준영킴