DOM - Event Listener

Devtool Chrome Event Listener


An event listener is an object that executes code for an event

An event listener observe a specific event and consists of:

  • type (a string, the event name)
  • 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)



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


General rules:

  • listeners are called in the order they were registered.
  • for handler, because there is only one listener by handler, the listener handler order is the first time, the handler is set to a non-null value.

This example demonstrates this rules.

  • The demo select a button and add listener for the click event
    • via the addEventListener function
    • and a handler (javascript property and html attribute)
var button = document.getElementById("startButton");
// an listener with a callback
button.addEventListener("click", function () { addOutputAfter("1 - Callback") }, false);
// the first handler definition (it will not print because the definition is overwritten with another definition later)
button.onclick = function () { addOutputAfter("2 - Event Handler First definition (idl way)"); }; 
// another listener
button.addEventListener("click", function () { addOutputAfter("3 - Callback") }, false);
// a second handler definition that will overwrite the first one
button.setAttribute("onclick", "addOutputAfter('4 - Event Handler last definition (on attribute)')"); 
  • The HTML with two buttons controls
<button id="startButton">Start Demo</button>
<button id="clearButton">Clear</button>
<div id="output"></div>
  • Result: If the start Button is clicked, the code will add 3 texts (and not 4)
    • 2 from the addEventListener function
    • 1 for the event handler with multiple definition, to demonstrate that:
      • the last code defined is executed
      • at the position of the first definition

The official order definition: The order of event listeners for a particular event type will always be:

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



addEventListener(type, callback, options)
  • Remove: Event listeners can be removed by utilizing the removeEventListener() method, passing the same arguments than when they were created
removeEventListener(type, callback, options)


Documentation / Reference

Discover More
Dom Attribute Set To Color Red
Attribute manipulation with DOM

How to add, delete, get any node attribute with the DOM
Bootstrap Tooltip Snippet

This page shows snippets on how to handle the Boostrap tooltip
CSS - Viewport (Reader's window)

The viewport is the viewing area on a screen media. It's then a property of media. The top media of a browser is the window (ie browser tab) As an iframe create a new window, you can set a new viewport...
Card Puncher Data Processing
D3 - Event Listener (On Operator)

in D3. Special operators called event handlers respond to user input and enable interaction. D3’s on operator exposes the event listeners for native event types. For consistency with other functional...
Class Html Beauty Blue Added
DOM - Class attribute

manipulation in the DOM. API The DOM Web API has a special function to select on class: the getElementsByClassName() function one You can select the class with a selector With Native Javascript...
Devtool Chrome Event Listener
DOM - Click Event (OnClick)

1001 ways to handle a the click event. The click event occurs when the pointing device button is clicked over an element. The onclick on attribute may be used with most elements. A click is a mousedown...
Devtool Chrome Event Listener
DOM - Event

This section is the management of action in the Document object model (ie in the browser) An event allows for signaling that something has occurred, e.g., that an image has completed downloading. Event...
Devtool Chrome Event Listener
DOM - Event Callback Function (Attach function to Event)

An event callback is a callback function that is executed when a event is fired. The Event callback function can be added / defined through: the setting of an event handler on.... such as onclick ...
DOM - Event Delegation

Event delegation in the DOM
DOM - Event Propagation (known as Event Bubbling)

event propagation is a mechanism in which an event is propagated to all its ascendant (ancestore). Event bubbles or propagates up the DOM tree: it starts with where the event happened, and then goes up...

Share this page:
Follow us:
Task Runner