DOM - Event Listener

1 - About

An event listener is one way to register one or several callback functions for an event

An event listener observe a specific event and consists of:

  • type (a string)
  • callback (null or an EventListener object)
  • capture (a boolean, initially false)
  • passive (a boolean, initially false)
  • once (a boolean, initially false)
  • signal (null or an AbortSignal object)
  • removed (a boolean for bookkeeping purposes, initially false)


3 - Example

var button = document.getElementById("the-button");
button.addEventListener("click", function () { console.log("Stop Pocking me !"); }, false);

<button id="the-button">Poke ?</button>

4 - Order

Since listeners are called in the order they were registered, the order of event listeners for a particular event type will always be:

  • first the event listeners registered with addEventListener() before the first time the event handler was set to a non-null value,
  • then the callback to which it is currently set, if any,
  • and finally the event listeners registered with addEventListener() after the first time the event handler was set to a non-null value.

5 - Example

5.1 - Order

This example demonstrates also the order in which event listeners are invoked. If the button in this example is clicked by the user, the page will show four alerts, with the text “ONE”, “TWO”, “THREE”, and “FOUR” respectively.

var countDelay = 0;
var countOutput = 0;
var outputElement = document.getElementById("output");

function addOutput(s) {
    var p = document.createElement("p");
    p.innerHTML = countOutput+ ' - '+s;

function addOutputAfter(s,sec) {
    if (typeof sec === 'undefined') sec = 1000;
    window.setTimeout(function() { addOutput(s) },countDelay*sec);// Wait two seconds

var button = document.getElementById("startButton");
button.addEventListener("click", function () { addOutputAfter("One") }, false);
button.setAttribute("onclick", "alert('NOT CALLED')"); // event handler listener is registered here
button.onclick = function () { addOutputAfter("Two"); };
button.addEventListener("click", function () { addOutputAfter("Three") }, false);
button.addEventListener("click", function () { addOutputAfter("Four") }, false);

var clearButton = document.getElementById("clearButton");
clearButton.addEventListener("click", function () { outputElement.innerHTML=''; count=0;}, false);

<button id="startButton">Start Demo</button>
<button id="clearButton">Clear</button>
<div id="output"></div>

5.2 - Jquery

<button id="my-name-is" class="btn btn-info" role="button">My Name is</button>
<div id="my-name" class="alert alert-info" hidden >

var hiddenBox = $( "#my-name" );

$( "#my-name-is" ).on( "click", function( event ) {;

6 - Management

6.1 - Remove

7 - Documentation / Reference

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap