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)

Ref

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) {
    countOutput++;
    var p = document.createElement("p");
    p.innerHTML = countOutput+ ' - '+s;
    outputElement.appendChild(p);
}

function addOutputAfter(s,sec) {
    if (typeof sec === 'undefined') sec = 1000;
    countDelay++;
    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>
<p></p>
<div id="my-name" class="alert alert-info" hidden >
    Nico
</div>


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

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

6 - Management

6.1 - Remove

7 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap