Event - Dispatch (Starts Propagation / Bubble)

Devtool Chrome Event Listener


Dispatching an event means to follow the steps that propagate the event through the tree.

Firing an event is just starting the propagation (dispatch) process.

Demo: explicit dispatch with the dispatchEvent function

  • The HTML code. We will execute an event against the world span.
<p>Hello <span id="world">world</span>!</p>
  • Utility function to print the node id
function getNodeId(node){
  let nodeId = node.nodeName;
  if ("id" in node){
     nodeId += "#"+node.id;
  return nodeId.toLowerCase();
function eventCallback(e) {
     console.log("Target: "+getNodeId(e.target));
     console.log("Current Target: "+getNodeId(e.currentTarget));
     console.log("Event Phase: "+e.eventPhase);
let eventName = "myEvent";
  • Add the listeners on document, body and element that executes the callback for this event
document.addEventListener(eventName , eventCallback, {capture: true});
document.body.addEventListener(eventName , eventCallback);
document.getElementById("world").addEventListener(eventName , eventCallback);
  • Create the event and dispatch it against the span world element
var myEvent = new Event(eventName, {bubbles:true});
  • Result:

Documentation / Reference

Discover More
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...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
Devtool Chrome Event Listener
Event - Fire

Firing an event means to: create the event object and dispatch it to start the propagation through the registered callback function The firing is done by the user agent (ie the browser) via the...
Devtool Chrome Event Listener
How to create your own custom event type (Javascript, DOM)?

This page shows you how you can create your own event type. : In this step, we create the HTML and the code that will be called when the event is fired/dispatched. This utility function is used...
How to select text dynamically in a Browser with Javascript? The window Selection Object explained

How to manipulate the selection made by a mouse or with the keyboard in a browser
Devtool Chrome Event Listener
Javascript Event Targets (DOM)

An event has several target attached to them
Devtool Chrome Event Listener
Select Events (selectstart, selection change)

This page is the events that are fired when a selection of text occurs The select event occurs when a user selects some text in form controls when their text selection is adjusted (whether by an...

Share this page:
Follow us:
Task Runner