[JavaScript] Multiple Events to Multiple Elements

In this article, we will discuss how to add multiple event listeners to multiple elements using plain JavaScript.

Desired outcome

If you use jQuery, you can write as below to add multiple event listeners to multiple elements.

$(document).on('click mouseover', '.hoge, .foo', (e) => {
    console.log(e.target)
})

So you may be tempted to write as below when try to replace it with plain Javacript.
But it doesn’t work.

document.querySelectorAll('.hoge, .foo').addEventListener('click mouseover', (e) => {
    console.log(e.target)
})

The reasons the above code doesn’t work are the following two points:
・You can’t use addEventListener on the result of querySelectorAll
・addEventListener cannot add multiple event listeners

Therefore, we need to learn the following two things:
・How to add an event listener to multiple elements
・How to add multiple event listeners

By learning the above two points, we aim to create a function that allows us to register events in the following manner.

registerEvent('click mouseover', '.hoge, .foo', (e) => {  
    console.log(e.target)
})

How to add an event listener to multiple elements

When trying to add an event listener to multiple elements using plain JavaScript, it may seem to expect the following code to work, but it doesn’t work correctly.
As explained earlier, you cannot use addEventListener to the result of querySelectorAll.

NG example：

document.querySelectorAll('.hoge, .foo').addEventListener('click', (e)=>{ 
    console.log(e.target) 
})

Iterating through the result of querySelectorAll and applying addEventListener to each element will work　properly.

OK example：

document.querySelectorAll('.hoge, .foo').forEach((element) => {
    element.addEventListener('click', (e) => { 
        console.log(e.target) 
    })
})

How to add multiple event listeners

When trying to add multiple event listeners using plain JavaScript, it may seem to expect the following code to work, but it also doesn’t work correctly. As explained earlier, addEventListener cannot add multiple event listeners at once.

NG example：

document.querySelector('#hoge').addEventListener('click mouseover', (e)=>{ 
    console.log(e.target)
})

Splitting the events by whitespace, looping through them, and applying each event using addEventListener will work properly.

OK example：

'click mouseover'.split(' ').forEach((event)=>{
    document.querySelector('#hoge').addEventListener(event, (e)=>{ 
        console.log(e.target) 
    })
})

How to add multiple event listeners to multiple elements

Now, up to this point, we have learned how to add an event listener to multiple elements and how to add multiple event listeners. Let’s combine these to see how to add multiple event listeners to multiple elements.

document.querySelectorAll('.hoge, .foo').forEach((element) => {
    'click mouseover'.split(' ').forEach((event)=>{
        element.addEventListener(event, (e)=>{ 
            console.log(e.target) 
        })
    })
})

Well, we’ve achieved the desired outcome but this approach seems a bit verbose.
Let’s wrap it in a function.

Creating a function to simplify event registration.

So far, we’ve managed to add multiple event listeners to multiple elements, but the code has become quite verbose. Let’s simplify the event registration process in plain JavaScript by encapsulating it in a function.

function registerEvent(events, selector, callBack) {
    document.querySelectorAll(selector).forEach((element) => {
        events.split(' ').forEach((event)=>{
            element.addEventListener(event, (e)=>{ callBack(e) })
        })
    })
}

By placing this function in a common file, you can easily perform event registrations anywhere you need. To use the function for event registration, you can simply write it like the following example:

registerEvent('click mouseover', '.hoge, .foo', (e) => {  
    console.log(e.target)
})

That is all, it was about how to add multiple event listeners to multiple elements using plain JavaScript.