Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add many Event Handlers to the same element with JavaScript HTML DOM?
It is very common to use the events while we are programming in JavaScript. Suppose you are creating a modal that opens up on clicking a button or hovering over using the cursor, here we using two events on a single element but JavaScript does not have any official way to use many event listeners on a single element. In this article, we will learn How to add many Event Handlers to the same element with JavaScript HTML DOM. To achieve this, we have the following approaches given below.
Using Multiple addEventListener Methods
Using the ES6 Way
Using Multiple addEventListener Methods
The addEventListener is an inbuilt JavaScript method that is used to attach an event to an element. It has three arguments the first one takes the name of the event in string format and the second is the callback function that gets called when the event is fired, and the third argument is optional and which is used to specify whether you want to capture the event or not, it is a Boolean value. You can use the addEventListener with window and document as well.
Syntax
Event.addEventListener(event, function, useCapture )
Parameter
Event − It is a required parameter that specifies the name of the event in string format.
Function − It is a required parameter that gets called when the event is fired.
useCapture − It is an optional parameter that specifies if the event is in the bubbling or capturing phase. Its type is Boolean.
Note − Do not use “on” before the event. For example: write “click” instead of “onclick”.
Approach
To add multiple event listeners on a single element, we call the addEventListener method multiple times with multiple events but every time the function is passed to it should be the same.
Example
In this example, we have a button and we are increasing the counter on clicking the button or hovering over the button.
<html> <head> <title> Example -add many Event Handlers to the same element with JavaScript HTML DOM </title> </head> <body> <h2> Adding many Event Handlers to the same element with JavaScript HTML DOM ? </h2> <p> Click or mouse over the button to increase the counter </p> <h1>Counter: <span id="counter"> 0 </span> </h1> <button id="btn" >Increse ++</button> </body> <script> // Get the button and counter let btn = document.getElementById("btn") let counter = document.getElementById("counter"); // Call the addEventListener method btn.addEventListener("mousemove", increase) btn.addEventListener("click", increase) // Define the increase function function increase(){ counter.innerText = parseInt(counter.innerText) + 1 } </script> </html>
Using the ES6 Way
In this method also we use the addEventListener but instead of calling it multiple times, we call it only once. In this approach, we use the following steps.
Add all the events in an array.
Apply the forEach method to the array and then at each iteration call the addEventListener with that element which is the name of the event.
Example
In this example, we have a button and we are increasing the counter on clicking the button or hovering over the button.
<html> <head> <title>Example- add many Event Handlers to the same element with JavaScript HTML DOM </title> </head> <body> <h2> Adding many Event Handlers to the same element with JavaScript HTML DOM? </h2> <p> Click or mouse over the button to increase the counter </p> <h1>Counter: <span id="counter"> 0 </span> </h1> <button id="btn">Increse ++</button> </body> <script> // Get the button and counter let btn = document.getElementById("btn") let counter = document.getElementById("counter"); // Call the addEventListener method ["click", "mousemove"].forEach((event) => { btn.addEventListener(event, increase) }) // Define the increase function function increase() { counter.innerText = parseInt(counter.innerText) + 1 } </script> </html>
9K+ Views
