Javascript Event - 7 Methods and 12 Properties (Reference)

composedPath()

It returns the event’s path which is an array of the objects on which listeners will be invoked.

function fn_name(e) {
  var x = e.composedPath();
}

preventDefault()

Cancels the event (if it is cancelable).

function fn_name(e) {
  e.preventDefault();
}

stopImmediatePropagation()

For this particular event, prevent all other listeners from being called.

function fn_name(e) {
  e.stopImmediatePropagation();
}

stopPropagation()

Stops the propagation of events further along in the DOM.

function fn_name(e) {
  e.stopPropagation();
}

addEventListener()

Sets up a function that will be called whenever the specified event is delivered to the target.

document.addEventListener("event_name", fn_name(e));
window.addEventListener("event_name", fn_name(e));
el.addEventListener("event_name", fn_name(e));

// target.addEventListener(type, listener, {options}, useCapture);

// type
// A case-sensitive string representing the event type to listen for

// listener
// The function object that receives a notification when an event of the specified type occurs

// options
// capture,once,passive

// useCapture
// A Boolean indicating whether events of this type will be dispatched
// to the registered listener before being dispatched to any EventTarget
// beneath it in the DOM tree

removeEventListener()

Removes from the EventTarget an event listener previously registered with addEventListener.

document.removeEventListener("event_name", fn_name(e));
window.removeEventListener("event_name", fn_name(e));
el.removeEventListener("event_name", fn_name(e));

dispatchEvent()

Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners.

var x = !target.dispatchEvent(event);

bubbles

A boolean indicating whether or not the event bubbles up through the DOM. It is a read-only property.

function fn_name(e) {
  var x = e.bubbles;
  // true
}

cancelable

A boolean indicating whether the event is cancelable. It is a read-only property.

function fn_name(e) {
  var x = e.cancelable;
  // true
}

composed

A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM. It is a read-only property.

function fn_name(e) {
  var x = e.composed;
  // true
}

currentTarget

current target for the event. It always refers to the element to which the event handler has been attached. Event.target, which identifies the element on which the event occurred and which may be its descendant.

function fn_name(e) {
  var x = e.currentTarget;
}

cancelBubble

Setting its value to true before returning from an event handler prevents propagation of the event.

function fn_name(e) {
  e.cancelBubble = true;
}

defaultPrevented

Indicates whether or not the call to event.preventDefault() canceled the event. It is a read-only property.

function fn_name(e) {
  var x = e.defaultPrevented;
  // true
}

eventPhase

Indicates which phase of the event flow is being processed. It is a read-only property.

function fn_name(e) {
  var x = e.eventPhase;
  // true
}

// Event.NONE   0
// No event is being processed at this time.

// Event.CAPTURING_PHASE    1
// The event is being propagated through the target's ancestor objects.

// Event.AT_TARGET  2
// The event has arrived at the event's target.

// Event.BUBBLING_PHASE 3
// The event is propagating back up through the target's ancestors in reverse order, starting with the parent, and eventually reaching the containing Window.

returnValue

It indicates whether the default action for this event has been prevented or not. It is a read-only property.

function fn_name(e) {
  var x = e.returnValue;
  // true
}

target

A reference to the target to which the event was originally dispatched. It is a read-only property.

function fn_name(e) {
  var x = e.target;
}

timeStamp

It returns the time (in milliseconds) at which the event was created. It is a read-only property.

function fn_name(e) {
  var x = e.timeStamp;
}

type

The name of the event. Case-insensitive. It is a read-only property.

function fn_name(e) {
  var x = e.type;
}

isTrusted

A Boolean that is true when the event was generated by a user action. False when the event was created. False when modified by a script. False when dispatched via EventTarget.dispatchEvent(). It is a read-only property.

function fn_name(e) {
  var x = e.isTrusted;
  // true
}