Javascript 如何为多个元素添加事件侦听器？

我有一个有5个输入字段的页面。如何将模糊事件侦听器一起添加到它们上

我尝试时出错了

document.querySelectorAll('input').addEventListener('blur', e => {
  console.log('blur on input')
})

编辑1

我可以将eventListeners添加到单个项目中，如下所示

const allInputs = [...document.getElementsByTagName('input')]
allInputs.forEach(item => item.addEventListener('blur', (e) => console.log('blur') ))

但有没有办法在HTMLCollection上添加一个集体事件侦听器

Element方法返回一个静态（非活动）节点列表，表示与指定选择器组匹配的文档元素列表

您必须循环所有元素以单独附加事件（

blur

），如下所示：

document.querySelectorAll('input').forEach(function(el){
   el.addEventListener('blur', e => {
      console.log('blur on input')
   });
});

---

这会奏效的。向文档中添加事件侦听器，并在事件冒泡时捕获目标

document.addEventListener（“focusout”，函数（事件）{
if（event.target instanceof HTMLInputElement）//也可以用作elem.target.tagName.toLowerCase（）=“输入”
{
log（“使用focusout:+event.target.id”）；
event.preventDefault（）；
}
});
document.addEventListener（“模糊”，函数（事件）{
if（event.target instanceof HTMLInputElement）//也可以用作elem.target.tagName.toLowerCase（）=“输入”
{
log（“使用模糊：+event.target.id”）；
event.preventDefault（）；
}
}，对）

另外，尝试使用事件捕获进行事件委派。您可以在单个事件侦听器中处理多个元素