JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
DOM EventListeners
The addEventListener() method
Example
Add an event listener that becomes active as soon the user clicks the button.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<button id=”myBtn”>Try it</button>
<p id=”demo”></p>
<script>
document.getElementById(“myBtn”).addEventListener(“click”, displayDate);
function displayDate() { document.getElementById(“demo”).innerHTML = Date();
}
</script>
</body>
</html>
Output
JavaScript addEventListener()
This example uses the addEventListener() method to attach a click event to a button.
- The addEventListener() method is used to attach an event handler to the d defined element.
- The addEventListener() method is used to attache an event handler to an element without overwriting existing event handlers.
- Many event handlers can be added to one element.
- You can add many event handlers of the same type to one element, i.e two “click” events.
- Event listeners can be added to any DOM object not only HTML elements. i.e the window object.
- The addEventListener() method gives an easy control on the how the event reacts to bubbling.
- When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and enables you to add event listeners even when you do not control the HTML markup.
- You can easily eradicate an event listener by using the removeEventListener() method.
Syntax
element.addEventListener(event, function, useCapture);
The first parameter is the type of the event (like “click” or “mousedown” or any other HTML DOM Event.)
The second parameter is the function that is used to call when the event occurs.
The third parameter is a boolean value defining whether to use event bubbling or event capturing. This parameter is optional.
Add an Event Handler to an Element
Example
Alert “Hello World!” when the user clicks on an element.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<button id=”myBtn”>Try it</button>
<script>
document.getElementById(“myBtn”).addEventListener(“click”, function() {
alert(“Hello World!”);
});
</script>
</body>
</html>
Output
JavaScript addEventListener()
This example uses the addEventListener() method to attach a click event to a button.
Add Many Event Handlers to the Same Element
The addEventListener() method enables you to add many events to the same element, without overwriting existing events:
Example
Let’s go slowly and learn how to use it.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to add two click events to the same button.</p>
<button id=”myBtn”>Try it</button>
<script>
var x = document.getElementById(“myBtn”);
x.addEventListener(“click”, myFunction);
x.addEventListener(“click”, someOtherFunction);
function myFunction() {
alert (“Hello World!”);
}
function someOtherFunction() {
alert (“This function was also executed!”);
}
</script>
</body>
</html>
Output
JavaScript addEventListener()
This example uses the addEventListener() method to add two click events to the same button.
Add an Event Handler to the window Object
The addEventListener() method enables you to add event listeners on any HTML DOM object like HTML elements, the HTML document, the window object, or other objects that support events, like the xmlHttpRequest object.
Example
Add an event listener that fires when a user resizes the window.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method on the window object.</p>
<p>Try resizing this browser window to trigger the “resize” event handler.</p>
<p id=”demo”></p>
<script>
window.addEventListener(“resize”, function(){
document.getElementById(“demo”).innerHTML = Math.random();
});
</script>
</body>
</html>
Output
JavaScript addEventListener()
This example uses the addEventListener() method on the window object.
Try resizing this browser window to trigger the "resize" event handler.
0.33346673776735747
Passing Parameters
While passing parameter values, you may use an “anonymous function” that calls the specified function with the parameters:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example demonstrates how to pass parameter values when using the addEventListener() method.</p>
<p>Click the button to perform a calculation.</p>
<button id=”myBtn”>Try it</button>
<p id=”demo”></p>
<script>
let p1 = 5;
let p2 = 7;
document.getElementById(“myBtn”).addEventListener(“click”, function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
document.getElementById(“demo”).innerHTML = a * b;
}
</script>
</body>
</html>
Output
JavaScript addEventListener()
This example demonstrates how to pass parameter values when using the addEventListener() method.
Click the button to perform a calculation.
Event Bubbling or Event Capturing?
There are two methods of event propagation in the HTML DOM, bubbling and capturing.
- Event propagation is a method of defining the element order when an event occurs. If you consists of a <p> element within a <div> element, and the user clicks on the <p> element, which element’s “click” event should be handled first.
- In bubbling the inner most element’s event is handled first and then the outer: the <p> element’s click event is handled first, then the <div> element’s click event.
- In capturing the outer most element’s event is handled first and then the inner: the <div> element’s click event will be handled first, then the <p> element’s click event.
With the addEventListener() method you can specify the propagation type by using the “useCapture” parameter.
addEventListener(event, function, useCapture);
Example
The default value is false uses the bubbling propagation, when the value is set to true, the event uses the capturing propagation.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
background-color: coral;
padding: 50px;
}
#myP1, #myP2 {
background-color: white;
font-size: 20px;
border: 1px solid;
padding: 20px;
}
</style>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type”>
</head>
<body>
<h2>JavaScript addEventListener()</h2>
<div id=”myDiv1″>
<h2>Bubbling:</h2>
<p id=”myP1″>Click me!</p>
</div><br>
<div id=”myDiv2″>
<h2>Capturing:</h2>
<p id=”myP2″>Click me!</p>
</div>
<script>
document.getElementById(“myP1”).addEventListener(“click”, function() {
alert(“You clicked the white element!”);
}, false);
document.getElementById(“myDiv1”).addEventListener(“click”, function() {
alert(“You clicked the orange element!”);
}, false);
document.getElementById(“myP2”).addEventListener(“click”, function() {
alert(“You clicked the white element!”);
}, true);
document.getElementById(“myDiv2”).addEventListener(“click”, function() {
alert(“You clicked the orange element!”);
}, true);
</script>
</body>
</html>
Output
JavaScript addEventListener()
Bubbling:
Click me!
Capturing:
Click me!
The removeEventListener() method
The removeEventListener() method is used to remove the event handlers that have been attached with the addEventListener() method.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: coral;
border: 1px solid;
padding: 50px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>JavaScript removeEventListener()</h2>
<div id=”myDIV”>
<p>This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.</p>
<p>Click the button to remove the div’s event handler.</p>
<button onclick=”removeHandler()” id=”myBtn”>Remove</button>
</div>
<p id=”demo”></p>
<script>
document.getElementById(“myDIV”).addEventListener(“mousemove”, myFunction);
function myFunction() {
document.getElementById(“demo”).innerHTML = Math.random();
}
function removeHandler() {
document.getElementById(“myDIV”).removeEventListener(“mousemove”, myFunction);
}
</script>
</body>
</html>
Output
JavaScript removeEventListener()
This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.
Click the button to remove the div's event handler.