With the evolution of plain JavaScript, the movement to move away from jQuery is becoming more prominent. However, if you’ve become too accustomed to jQuery, you might find yourself thinking, “Wait, how do I write this in plain JavaScript?”
In this article, we will discuss how to register event on multiple elements, how to register multiple events, and how to register multiple events on multiple elements using plain JavaScript.
Desired outcome
If you want to register multiple events on multiple elements, for example, if you want to register click and mouseover events on elements with the “hoge” and “foo” classes, you can achieve this using jQuery as below.
$(document).on('click mouseover', '.hoge, .foo', (e) => {
console.log(e.target)
})
However, when trying to replace this with JavaScript, writing it intuitively like the following 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 register multiple events
Therefore, we need to learn the following two things:
・How to register event on multiple elements
・How to register multiple events
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 register event on multiple elements
When trying to register event on 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 on 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 register multiple events
When trying to register multiple events using plain JavaScript, it may seem to expect the following code to work However,but it also doesn’t work correctly. As explained earlier, addEventListener cannot be used to register multiple events 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 register multiple events on multiple elements
Now, up to this point, we have learned how to register event on multiple elements and how to register multiple events. Let’s combine these to see how to register multiple events on multiple elements.
document.querySelectorAll('.hoge, .foo').forEach((element) => {
'click mouseover'.split(' ').forEach((event)=>{
element.addEventListener(event, (e)=>{
console.log(e.target)
})
})
})
Well, while we’ve achieved the desired outcome, this approach seems a bit verbose. Let’s encapsulate it in a function
Creating a function to simplify event registration.
So far, we’ve managed to register multiple events on 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 register multiple events on multiple elements using plain JavaScript.
