HTML - DOM addEventListener() Method

Quiz

The HTML DOM addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

Target can be any object that supports events, some common targets are Element, or it's children, Document, and Window. Multiple events can be added to one element without overwriting existing event handlers.

The following interactive example demonstrate the usage of the addEventListener() method for different scenarios −

HTML DOM addEventListener() Method

Welcome to Tutorialspoint (click on me after adding the event)

You are at the right place to learn.... Visit for more

Syntax

Following is the syntax of the HTML DOM addEventListener() method −

document.addEventListener(event, listener, useCapture);

Parameters

This method accepts the following parameters −

Parameter	Description
event	It represents type of event being used. Some common events used are click , dblclick, mouseover.
listener	It can be any valid function that is called upon occurrence of any event. For example:Changing of light theme to dark upon click(event).
useCapture	This is an optional parameter to control event propagation. It uses boolean value where TRUE represents capturing phase while FALSE represents event bubbling phase.

Return Value

This method does not return anything.

Example 1: Adding Event to Element

The following example demonstrates the usage of the HTML DOM addEventListener() method. It adds the mouseover event to the div element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM addEventListener()</title>
<style>
   #event {
      height: 400px;
      width: 400px;
   }
</style>
</head>
<body>
<p>Mouseover on the div element </p>
<div id="event"> This is a div element.</div>
<script>
   document.getElementById("event").addEventListener("mouseover", fun);
   function fun() {
      document.getElementById("event").style.backgroundColor = "#04af2f";
   }
</script>
</body>
</html>

Example 2: Adding Multiple Events

The following is another example of the HTML DOM addEventListener() method. We use this method to add multiple events, such as click, mouseover, mouseout, etc −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM addEventListener()</title>
</head>
<body>
<p>This is just a random text to select.</p>
<button id="click">click me</button>
<p id="any"></p>
<script>
   document.addEventListener("mouseover", funtwo);
   document.getElementById("click").addEventListener("click", fun);
   document.addEventListener("mouseout", funthree);
   
   function funtwo() {
      document.getElementById("any").innerHTML = "mouseover event";
   }
   
   function fun() {
      alert("Welcome to Tutorialspoint");
   }
   
   function funthree() {
      document.getElementById("any").innerHTML = "mouseout event";
   }
</script>
</body>
</html>

Example 3: Adding Multiple Event Listeners

In the example below, multiple event listeners or functions are added to the mouseover event using the addEventListener() method −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM addEventListener()</title>
<style>
   #event {
      height: 400px;
      width: 400px;
   }
</style>
</head>
<body>
<div id="event" class="out"> This is a div element.</div>
<script>
   document.getElementById("event").addEventListener("mouseover", fun);
   document.getElementById("event").addEventListener("mouseover", funtwo);
   document.getElementById("event").addEventListener("mouseover", funthree);
   function fun() {
      document.getElementById("event").style.backgroundColor = "#04af2f";
   }
   function funtwo() {
      document.getElementById("event").innerHTML = "This is the second function executing with mouseover";
   }
   function funthree() {
      alert("This is third function with mouseover");
   }
</script>
</body>
</html>

Supported Browsers

Method
addEventListener()	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page