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

Front End Technology Javascript Object 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.