DOM - Event

About

UI - Action (Interaction | Event ) in the dom.

An event allows for signaling that something has occurred, e.g., that an image has completed downloading.

Event are code structures that listen out for things happening to the document.

In the DOM specification, you can find the following:

  • The concept of a regular event parent and a cross-boundary event parent

The callback function that handle the event can be created with the help of:

  • An event handler. Its name starts with “on” and is followed by the name of the event for which it is intended. (Example: onClick)

and get back an event object

Features

The following features are defined in the DOM Events specification:

  • MouseEvent interface
  • MouseEventInit dictionary type
  • The UIEvent interface's detail attribute

An event's type is synonymous of name type (ie “an event named click” or “if the event name is keypress”)

Example

For example, the following document fragment:

<button class="btn btn-info" onclick="console.log('Bouh!')" >Click Me</button>

Glossary

In the contexts of events, the terms fire and dispatch are used as defined in the DOM specification:

Fire

Dispatch

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

Trusted

The term trusted event is used to refer to events whose isTrusted attribute is initialized to true

Missed

Management

Type

The type of an event categorize the event. It's also known as the name of the event (Ref)

Example:

List

Category

See

In the chrome devtool

Propagation (Bubble)

An event may bubble (ie propagate) up the dom tree to other subscriber.

Prevent default

If you don't want to have the default behavior (such as following a link), you can prevent it (stop it)

Target

Object

The structure of an event can be found in the Event interface definition.

Create your own

Example (Credits):

  • 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('-------------------');
     console.log("Target: "+getNodeId(e.target));
     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})
document.getElementById("world").dispatchEvent(myEvent)
  • Result:

Documentation / Reference


Powered by ComboStrap