- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
HTML DOM addEventListener() Method
The HTML DOM addEventListener() method is used to attach an event handler to the specified element.
Following is the syntax −
element.addEventListener(event, function, capture)
Above, the parameters include −
- event: The name of the event. Required.
- function: The function to run when the event occurs. Required.
- capture: Whether the event should be executed in the capturing phase. This check and displays a boolean value; true or false.
Let us now see an example to implement the DOM addEventListener() method −
Example
<!DOCTYPE html> <html> <body> <h2>Demo Heading</h2> <button id="btn">Click</button> <p id="myid"></p> <script> var x = document.getElementById("btn"); x.addEventListener("mouseover", one); x.addEventListener("click", two); function one() { document.getElementById("myid").innerHTML += "Button hovered! " } function two() { document.getElementById("myid").innerHTML += "!!Button Clicked!! " } </script> </body> </html>
Output
Now, if you will click, the message “Button clicked” would be displayed. On mouse hovering the button, the following text would be displayed: “Button hovered” −
- Related Articles
- How to work with addEventListener() method in JavaScript HTML DOM?
- HTML DOM querySelector() Method
- HTML DOM querySelectorAll() Method
- HTML DOM removeChild() Method
- HTML DOM removeAttribute() Method
- HTML DOM removeAttributeNode() Method
- HTML DOM setAttributeNode() Method
- HTML DOM setNamedItem() Method
- HTML DOM removeNamedItem() Method
- HTML DOM open() Method
- HTML DOM removeEventListener() Method
- HTML DOM replaceChild() Method
- HTML DOM insertAdjacentElement( ) Method
- HTML DOM insertAdjacentHTML( ) Method
- HTML DOM insertAdjacentText( ) Method

Advertisements