How to add event listener for multiple elements?

Question

I have a page with 5 input fields. How do I add a blur event listener on them together?

I get an error when I try

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

EDIT 1

I am able to add eventListeners to individual items like so,

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

But is there a way to add a collective event listener on HTMLCollection?

Also, try event delegation using event capturing. – Sebastian Simon Jun 24 '18 at 14:05 — Sebastian Simon, Jun 24 '18 at 14:05

Mamun · Answer 1 · 2018-06-24T14:05:27.017

0

The Element method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

You have to loop through all the elements to attach the event (blur) individually like the following way:

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

edited Jun 24 '18 at 14:05

answered Jun 24 '18 at 14:00

Mamun

66,969
9
47
59

You can handle in a single event listener for multiple elements – Vignesh Raja Jun 24 '18 at 14:39

Vignesh Raja · Answer 2 · 2018-06-24T14:26:23.743

This will work. Adding a event listener to document and capturing the target when the event bubbles.

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 in the blur event is to make it bubble.

MDN Docs for blur event, focusout event

Refer this nice article for more info.

How to add event listener for multiple elements?

2 Answers2