- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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?
To add more than one event handler to the same element, use the addEventListener() more than once. For each event handler, you need to add an addEventListener() method.
Example
You can try to run the following code to learn how to add more than one event handler −
<!DOCTYPE html>
<html>
<body>
<p>Click the below button once to get Date.</p>
<p>Click the below button twice to get an alert box.</p>
<button id="btnid"> Click me </button>
<p id="pid"></p>
<script>
document.getElementById("btnid").addEventListener("click", displayEvent);
var res = document.getElementById("btnid");
res.addEventListener("dblclick", myFunction);
function displayEvent() {
document.getElementById("pid").innerHTML = Date();
}
function myFunction() {
alert ("You clicked the button twice!");
}
</script>
</body>
</html>
Updated on 23-Jun-2020 12:09:22
- Related Questions & Answers
- How to add an event handler to an element in JavaScript HTML DOM?
- How to remove event handlers in JavaScript?
- How to detect all active JavaScript event handlers?
- How to add a new element to HTML DOM in JavaScript?
- How to override jQuery event handlers?
- What are event handlers in JavaScript?
- Add oninput attribute to HTML element with JavaScript?
- How to remove event handlers using jQuery?
- How to add an event handler to the specified element in JavaScript?
- How to add a class to DOM element in JavaScript?
- HTML DOM PageTransition Event
- HTML DOM Clipboard event
- HTML DOM Storage Event
- HTML DOM touchmove Event
- HTML DOM touchstart Event
Advertisements