JavaScript addEventListener()

The addEventListener() method is used to attach an event handler to a specified element without overwriting existing event handlers. It allows you to listen for events and define the response function when the event occurs.

Syntax

element.addEventListener(event, function, useCapture);

Although it has three parameters, the parameters event and function are widely used. The third parameter is optional to define. The values of this function are defined as follows.

Parameter Values

event: It is a required parameter. It can be defined as a string that specifies the event's name.
function: It is also a required parameter. It is a JavaScript function which responds to the event occur. useCapture: It is an optional parameter. It is a Boolean type value that specifies whether the event is executed in the bubbling or capturing phase. Its possible values are true and false. When it is set to true, the event handler executes in the capturing phase. When it is set to false, the handler executes in the bubbling phase. Its default value is false.
Let's see some of the illustrations of using the addEventListener() method.

Example

It is a simple example of using the addEventListener() method. We have to click the given HTML button to see the effect.

Example


<!DOCTYPE html>  
<html>  
<body>  
<p> Example of the addEventListener() method. </p>  
<p> Click the following button to see the effect. </p>  
<button id = "btn"> Click me </button>  
<p id = "para"></p>  
<script>  
document.getElementById("btn").addEventListener("click", fun);  
function fun() {  
document.getElementById("para").innerHTML = "Hello World" + "<br>" + "Welcome to the  javaTpoint.com";  
}  
</script>  
</body>  
</html>

Output

After clicking the given HTML button, the output will be -

Output

Now, in the next example we will see how to add many events to the same element without overwriting the existing events.

Example

<!DOCTYPE html>  
<html>  
<body>  
<p> This is an example of adding multiple events to the same element. </p>  
<p> Click the following button to see the effect. </p>  
<button id = "btn"> Click me </button>  
<p id = "para"></p>  
<p id = "para1"></p>  
<script>  
function fun() {  
    alert("Welcome to the javaTpoint.com");  
}  
   
function fun1() {  
   document.getElementById("para").innerHTML =  "This is second function";  
}  
function fun2() {  
   document.getElementById("para1").innerHTML =  "This is third function";  
}  
var mybtn = document.getElementById("btn");  
mybtn.addEventListener("click", fun);  
mybtn.addEventListener("click", fun1);  
mybtn.addEventListener("click", fun2);  
</script>  
</body>  
</html>

Output

Now, when we click the button, an alert will be displayed. After clicking the given HTML button, the output will be -

Output

When we exit the alert, the output is -

Output

Example

In this example, we are adding multiple events of a different type to the same element.

Example


<!DOCTYPE html>  
<html>  
<body>  
<p> This is an example of adding multiple events of different type to the same element. </p>  
<p> Click the following button to see the effect. </p>  
<button id = "btn"> Click me </button>  
<p id = "para"></p>  
<script>  
function fun() {  
    btn.style.width = "50px";  
    btn.style.height = "50px";  
    btn.style.background = "yellow";  
    btn.style.color = "blue";  
}  
   
function fun1() {  
   document.getElementById("para").innerHTML =  "This is second function";  
}  
function fun2() {  
    btn.style.width = "";  
    btn.style.height = "";  
    btn.style.background = "";  
    btn.style.color = "";  
}  
var mybtn = document.getElementById("btn");  
mybtn.addEventListener("mouseover", fun);  
mybtn.addEventListener("click", fun1);  
mybtn.addEventListener("mouseout", fun2);  
</script>  
</body>  
</html>

Output

When we move the cursor over the button, the output will be -

Output

After clicking the button and leave the cursor, the output will be -

Output

Event Bubbling or Event Capturing

Now, we understand the use of the third parameter of JavaScript's addEventListener(), i.e., useCapture. In HTML DOM, Bubbling and Capturing are the two ways of event propagation. We can understand these ways by taking an example. Suppose we have a div element and a paragraph element inside it, and we are applying the "click" event to both of them using the addEventListener() method. Now the question is on clicking the paragraph element, which element's click event is handled first. So, in Bubbling, the event of paragraph element is handled first, and then the div element's event is handled. It means that in bubbling, the inner element's event is handled first, and then the outermost element's event will be handled. In Capturing the event of div element is handled first, and then the paragraph element's event is handled. It means that in capturing the outer element's event is handled first, and then the innermost element's event will be handled.

Syntax

addEventListener(event, function, useCapture);

We can specify the propagation using the useCapture parameter. When it is set to false (which is its default value), then the event uses bubbling propagation, and when it is set to true, there is the capturing propagation. We can understand the bubbling and capturing using an illustration.

Example

In this example, there are two div elements. We can see the bubbling effect on the first div element and the capturing effect on the second div element.
When we double click the span element of the first div element, then the span element's event is handled first than the div element. It is called bubbling.
But when we double click the span element of the second div element, then the div element's event is handled first than the span element. It is called capturing.

Example


<!DOCTYPE html>  
<html>  
<body>  
<p> This is an example of adding multiple events of different type to the same element. </p>  
<p> Click the following button to see the effect. </p>  
<button id = "btn"> Click me </button>  
<p id = "para"></p>  
<script>  
function fun() {  
    btn.style.width = "50px";  
    btn.style.height = "50px";  
    btn.style.background = "yellow";  
    btn.style.color = "blue";  
}  
   
function fun1() {  
   document.getElementById("para").innerHTML =  "This is second function";  
}  
function fun2() {  
    btn.style.width = "";  
    btn.style.height = "";  
    btn.style.background = "";  
    btn.style.color = "";  
}  
var mybtn = document.getElementById("btn");  
mybtn.addEventListener("mouseover", fun);  
mybtn.addEventListener("click", fun1);  
mybtn.addEventListener("mouseout", fun2);  
</script>  
</body>  
</html>

Output

Key Features of addEventListener: