How to add an event handler to an element in JavaScript HTML DOM?

Front End TechnologyJavascriptObject Oriented Programming

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.

raja
Updated on 22-Aug-2022 08:00:39

Advertisements