DOM Event Listeners

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.