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.
<p>Hello <span id="world">world</span>!</p>
function getNodeId(node){
let nodeId = node.nodeName;
if ("id" in node){
nodeId += "#"+node.id;
}
return nodeId.toLowerCase();
}
function eventCallback(e) {
console.log('-------------------');
console.log("Target: "+getNodeId(e.target));
console.log("Current Target: "+getNodeId(e.currentTarget));
console.log("Event Phase: "+e.eventPhase);
}
let eventName = "myEvent";
document.addEventListener(eventName , eventCallback, {capture: true});
document.body.addEventListener(eventName , eventCallback);
document.getElementById("world").addEventListener(eventName , eventCallback);
var myEvent = new Event(eventName, {bubbles:true});
document.getElementById("world").dispatchEvent(myEvent);