In Javascript, the addEventListener() method is used to add an event handler to an HTML element e.g button, achor, div e.t.c.
The addEventListener() method is known to an inbuilt function of Javascript. Through the use of addEventListener in Javascript, multiple event handlers can be added to HTML element without overwriting the existing event handlers.
element.addEventListener(event, function, useCapture);
The addEventListener has three parameters but the mostly used ones are the "event" and "function". The "useCapture" which happens to be the third parameter is optional to define.
Below is a detailed explanation of these parameters values in addEventListener
It is a required parameter. It can be defined as a string that specifies the event's name.
However, do not use any prefix such as "on" with the parameter value. For example, Use "click" instead of using "onclick".
It is also a required parameter. It is any JavaScript function that will be triggered once an event occurs.
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.
You might also read
understanding Javascript onclick event
Below is a simple demonstration of the addEventListener() method. This will display alert when the button is clicked.
?<!DOCTYPE html>
<html>
<head>
<script> window.onload =function(){ document.getElementById("btn").addEventListener("click", test); }
function test() {
alert ("addEventListener made simple in Emmason247.com.ng");
}
</script>
</head>
<body>
<h2> Example of the addEventListener() method</h2>
<p> Click the following button to see the action </p>
<button id = "btn"> Click Me </button>
</body>
</html>
Run this example and click on the button to see the result.
There one important feature that the Javascript addEventListener have. It aid you to attach as many as events you want as long as they are all free of error.
Now, in the next example we will see how to add many events to the same element without overwriting the existing events.
In this example, we are adding multiple events to the same element.
<!DOCTYPE html>
<html>
<head>
<script> window.onload =function(){ document.getElementById("btn").addEventListener("click", test1);
document.getElementById("btn").addEventListener("click", test2);
}
function test1() {
alert ("addEventListener made simple in Emmason247.com.ng");
}
function test2() {
alert ("addEventListener made simple in Emmason247.com.ng from 'test 2'");
}
</script>
</head>
<body>
<h2> Example of the addEventListener() method</h2>
<p> Click the following button to see the action </p>
<button id = "btn"> Click Me </button>
</body>
</html>
Now, if we click the button, an alert will be displayed.
In HTML DOM, Bubbling and Capturing are the two ways of event propagation.
Take for instance a case where we have a span element inside a div element, 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.
Now, to determine which one is to be handled first, you have to make use of the third parameter of the addEventListener() by setting it to either false which is the default or true.
In Bubbling, the event of span element is handled first, and then the div element's event is handled last. 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 span 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 last.
Recall the addEventListener syntax
addEventListener(event, function, useCapture);
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.
Let us see how bubbling and capturing works by 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>
<script>
window.onload = function(){
document.getElementById("d1").addEventListener("click",test1, false);
document.getElementById("s1").addEventListener("click",test2, false);
document.getElementById("d2").addEventListener("click", test3, true);
document.getElementById("s2").addEventListener("click", test4, true);
}
function test1() {
alert('Bubbling: you clicked on div element');
}
function test2() {
alert('Bubbling: you clicked on span element');
}
function test3() {
alert('Capturing: you clicked on div element');
}
function test4() {
alert('Capturing: you clicked on span element');
}
</script>
<style>
div{
background:dimgrey;
font-size: 45px; color:#fff;
}
span{
background:green;
}
</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>
</body>
</html>
We have to click the specific elements to see the effect.