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 an event handler to an element in JavaScript HTML DOM?
This tutorial will teach how to add an event handler to an element in JavaScript. There are two ways to add an event handler to any element, the first is using the addEventListener method and another is using the event attributes.
Using the addEventListener() Method
The addEventListener() method is used to attach an event handler to any DOM element. The syntax of this method is following.
Syntax
element.addEventListener( event, function, capture )
Parameter
Event − The name of the event you want to apply on the element e.g. click, mouseover, submit, etc.
Function − The callback function which will be fired after the event occurred.
Capture − Whether the event should be executed in the capturing phase. This checks and displays a boolean value; true or false.
Return value: NONE
Example 1
In this example, we are creating a counter which has a button and after every button click, we are increasing the counter value. To listen to the event we use the element.addEventListener() method.
<html> <head> <title>Example -add an event handler to an element in JavaScript HTML DOM </title> </head> <body> <h2> Adding an event handler to an element in JavaScript HTML DOM using the element.addEventListener method.</h2> <p>Click on the button to increase the counter value by one </p> <button id="btn">Click me</button> <p> <b>Counter: </b> <span id="counter">0</span> </p> </body> <script> // Get the button element let btn = document.getElementById("btn") // Get the counter element let counter = document.getElementById("counter") // Apply the addEventListener method btn.addEventListener("click", () => { // Increase the existing value by 1 // Use the parseInt method to convert the existing // value (which is in string format) into integer counter.innerText = parseInt(counter.innerText) + 1 }) </script> </html>
Adding Event Handler using the Event Listener Attributes
Browsers allow us to fire an event from the HTML itself. HTML elements have some event attributes e.g. onClick, onMouseOver, onSubmit, etc. To perform any action after these events are fired, we assign some JavaScript code to it or call a JavaScript function.
Example 2
In this example, we are creating a counter which has a button and after every button click, we are increasing the counter value. To listen to the event, we use the onclick attribute.
<html> <head> <title>Example program -add an event handler to an element in JavaScript HTML DOM </title> </head> <body> <h2> Adding an event handler to an element in JavaScript HTML DOM using the event attribute.</h2> <p>Click on the button to increase the counter value by one </p> <button id="btn" onclick="increseCounter()">Click me</button> <p> <b>Counter: </b> <span id="counter">0</span> </p> </body> <script> function increseCounter() { // Get the button element let btn = document.getElementById("btn") // Get the counter element let counter = document.getElementById("counter") // Increase the existing value by 1 // Use the parseInt method to convert the existing // value (which is in string format) into integer counter.innerText = parseInt(counter.innerText) + 1 } </script> </html>
In this tutorial, we discussed two approaches to add an event handler to an element in JavaScript HTML DOM. The first method is to use the addEventListener() method and the second is to use the event attribute.
1K+ Views
