The addEventListener() method is used to attach an event handler to a particular element. It does not override the existing event handlers. Events are said to be an essential part of the JavaScript. A web page responds according to the event that occurred. Events can be user-generated or generated by API’s. An event listener is a JavaScript’s procedure that waits for the occurrence of an event.
The addEventListener() method is an inbuilt function of JavaScript. We can add multiple event handlers to a particular element without overwriting the existing event handlers.
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.
Note: Do not use any prefix such as “on” with the parameter value. For example, Use “click” instead of using “onclick”.
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.
<!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 –
Now, in the next example we will see how to add many events to the same element without overwriting the existing events.
Example
In this example, we are adding multiple events to the same element.
!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 –
When we exit the alert, the output is –
Example
In this example, we are adding multiple events of a different type to the same element.
<!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 –
After clicking the button and leave the cursor, the output will be –
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.
- 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.
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: lightblue;
border: 2px solid red;
font-size: 25px;
text-align: center;
}
span{
border: 2px solid blue;
}
</style>
</head>
<body>
<h1> Bubbling </h1>
<div id = "d1">
This is a div element.
<br><br>
<span id = "s1"> This is a span element. </span>
</div>
<h1> Capturing </h1>
<div id = "d2"> This is a div element.
<br><br>
<span id = "s2"> This is a span element. </span>
</div>
<script>
document.getElementById("d1").addEventListener("dblclick", function() {alert('You have double clicked on div element')}, false);
document.getElementById("s1").addEventListener("dblclick", function() {alert('You have double clicked on span element')}, false);
document.getElementById("d2").addEventListener("dblclick", function() {alert('You have double clicked on div element')}, true);
document.getElementById("s2").addEventListener("dblclick", function() {alert('You have double clicked on span element')}, true);
</script>
</body>
</html>Output
Leave a Reply