时间戳

首页 > 解决方案 > 如何为多个元素添加事件监听器？

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 上添加一个集体事件监听器？

标签： javascriptdom

解决方案

这将起作用。将事件侦听器添加到文档并在事件冒泡时捕获目标。

document.addEventListener("focusout",function(event){
    if(event.target instanceof HTMLInputElement) //can also be used as elem.target.tagName.toLowerCase()=="input"
    {
        console.log("Using focusout : "+event.target.id);
        event.preventDefault();
    }
});
document.addEventListener("blur",function(event){
    if(event.target instanceof HTMLInputElement) //can also be used as elem.target.tagName.toLowerCase()=="input"
    {
        console.log("Using blur : "+event.target.id);
        event.preventDefault();
    }
},true);
<input id="1">
<input id="2">
<input id="3">
<input id="4">
<input id="5">

true在blur事件是使它泡沫。

模糊事件、聚焦事件的 MDN 文档

请参阅这篇不错的文章以获取更多信息。

推荐阅读