Javascript Event Targets (DOM)

Devtool Chrome Event Listener


An event object has target properties that points to elements related to the event.


target returns the object to which event is dispatched (its target). Ref.

This is:

  • for an implicit dispatch: ie event handler (ie on event), the element where the handler is defined
  • for an explicit dispatch: the element where the dispatchEvent function is called


currentTarget returns the object whose event listener’s callback is currently being invoked. Ref

This is:


The related target gets the elements that has focus when the event occurs.

  • ie a HTML element that has natively focus such as an anchor or a button
  • or an element with the tabindex property set to 0 or more.

You will get it for instance in a blur event.


Implicit Dispatch

You have an implicit dispatch when your event propagate (ie bubble).


  • The button that will be clicked and a div where the event will propagate.
    <button>Click me</button>
function printNodeNameCallback(e) {
     console.log("Target: ";
     console.log("Current Target: "+e.currentTarget.nodeName.toLowerCase());
document.querySelector("div").addEventListener("click", printNodeNameCallback);
document.querySelector("button").addEventListener("click", printNodeNameCallback);

Explicit dispatch

  • 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 += "#";
  return nodeId.toLowerCase();
function eventCallback(e) {
     console.log("Target: "+getNodeId(;
     console.log("Current Target: "+getNodeId(e.currentTarget));
     console.log("Event Phase: "+e.eventPhase);
let eventName = "myEvent";
  • Add two listeners on document and body that executes the callback for this event
document.addEventListener(eventName , eventCallback, {capture: true})
document.body.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
Dom Attribute Set To Color Red
Attribute manipulation with DOM

How to add, delete, get any node attribute with the DOM
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 Track Active Element
HTML - Focus (Active element) (and Blur)

The focus is the interactive element actually active on a HTML dom document through: a mouse click (if you mouse click on a text input field, ready to begin typing, this element will come into focus)...
How to add/remove CSS inline-style with the DOM

This page talks on how to manipulate the HTML style attribute on the DOM. CSS To set an inline style, you use: the qualified method: method of an element or the shortcut...

Share this page:
Follow us:
Task Runner