Event : Object

constructor

Event contains information describing the current event such as a click or download event. It is the first parameter to event listener callbacks. See MouseEvent, KeyboardEvent, and ProgressEvent for some derivations of Event.

Spec

Constructors

new Event(type : String, [eventInit : Object]) : Event

eventInit : {

bubbles :	Boolean
cancelable :	Boolean

}

Creates a new Event. Use dispatchEvent() to fire the event.

Example:

<div id='parent'>
  Parent
  <div id='child'>
    --Child
  </div>
</div>
<script>
  var phaseNames = { };
  phaseNames[Event.CAPTURING_PHASE] = 'capture';
  phaseNames[Event.AT_TARGET] = 'atTarget';
  phaseNames[Event.BUBBLING_PHASE] = 'bubble';

  var listener = function(event) {
    console.log(' phase=' + phaseNames[event.eventPhase] +
                ' type=' + event.type);
  };
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  parent.addEventListener('customEvent', listener, /* capture = */ true);
  child.addEventListener('customEvent', listener);
  parent.addEventListener('customEvent', listener);

  console.log('dispatching bubbles=false event')
  var nonBubblingEvent = new Event('customEvent');
  child.dispatchEvent(nonBubblingEvent);

  console.log('\ndispatching bubbles=true event')
  var nonBubblingEvent = new Event('customEvent', { bubbles: true });
  child.dispatchEvent(nonBubblingEvent);
</script>

Run

Results:

Instance Properties

bubbles : Boolean readonly

Returns true if the event will bubble up through the ancestor hierarchy.

cancelable : Boolean readonly

Returns true if the event can be canceled (by calling preventDefault()).

currentTarget : Object readonly

The Object that the current callback is running for. This will be the element that registered the listener and will different than target if this event is in the bubble or capture phase.

Example:

<div id='parent'>
  Click Me (parent)
  <div id='child'>
    --Click Me (child)
  </div>
</div>
<script>
  var phaseNames = { };
  phaseNames[Event.CAPTURING_PHASE] = 'capture';
  phaseNames[Event.AT_TARGET] = 'atTarget';
  phaseNames[Event.BUBBLING_PHASE] = 'bubble';

  var clickListener = function(event) {
    console.log('phase=' + phaseNames[event.eventPhase] +
                ' target=' + event.target.id +
                ' currentTarget=' + event.currentTarget.id);
  };
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  parent.addEventListener('click', clickListener, /* capture = */ true);
  child.addEventListener('click', clickListener);
  parent.addEventListener('click', clickListener);
</script>

Run

Results:

defaultPrevented : Boolean readonly

Returns true if preventDefault() has been called on this.

Example:

<div id='parent'>
  Click Me (parent)
  <div id='child'>
    --Click Me (child)
  </div>
</div>
<script>
  var phaseNames = { };
  phaseNames[Event.CAPTURING_PHASE] = 'capture';
  phaseNames[Event.AT_TARGET] = 'atTarget';
  phaseNames[Event.BUBBLING_PHASE] = 'bubble';

  var clickListener = function(event) {
    console.log('phase=' + phaseNames[event.eventPhase] +
                ' defaultPrevented=' + event.defaultPrevented);

    event.preventDefault();
  };
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  parent.addEventListener('click', clickListener, /* capture = */ true);
  child.addEventListener('click', clickListener);
  parent.addEventListener('click', clickListener);
</script>

Run

Results:

eventPhase : Number readonly

The current phase of the event. Will be one of NONE, CAPTURING_PHASE, AT_TARGET, or BUBBLING_PHASE.

Example:

<div id='parent'>
  Click Me (parent)
  <div id='child'>
    --Click Me (child)
  </div>
</div>
<script>
  var phaseNames = { };
  phaseNames[Event.CAPTURING_PHASE] = 'capture';
  phaseNames[Event.AT_TARGET] = 'atTarget';
  phaseNames[Event.BUBBLING_PHASE] = 'bubble';

  var clickListener = function(event) {
    console.log('phase=' + phaseNames[event.eventPhase] +
                ' target=' + event.target.id +
                ' currentTarget=' + event.currentTarget.id);
  };
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  parent.addEventListener('click', clickListener, /* capture = */ true);
  child.addEventListener('click', clickListener);
  parent.addEventListener('click', clickListener);
</script>

Run

Results:

isTrusted : Boolean readonly

target : Object readonly

The Object that originated this event. See also currentTarget.

Example:

<div id='parent'>
  Click Me (parent)
  <div id='child'>
    --Click Me (child)
  </div>
</div>
<script>
  var phaseNames = { };
  phaseNames[Event.CAPTURING_PHASE] = 'capture';
  phaseNames[Event.AT_TARGET] = 'atTarget';
  phaseNames[Event.BUBBLING_PHASE] = 'bubble';

  var clickListener = function(event) {
    console.log('phase=' + phaseNames[event.eventPhase] +
                ' target=' + event.target.id +
                ' currentTarget=' + event.currentTarget.id);
  };
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  parent.addEventListener('click', clickListener, /* capture = */ true);
  child.addEventListener('click', clickListener);
  parent.addEventListener('click', clickListener);
</script>

Run

Results:

timeStamp : Number readonly

The time (in milliseconds since 01 January, 1970 UTC) that the event fired. Use Date to convert to a human readable time.

Example:

<div id='element'>
  Click Me
</div>
<script>
  var element = document.getElementById('element');

  element.addEventListener('click', function(event) {
    console.log(new Date(event.timeStamp));
  });
</script>

Run

Results:

type : String readonly

A string describing the type of event.

Example:

<div id='element'>
  Click Me
</div>
<script>
  var eventListener = function(event) {
    console.log(event.type);
  };
  var element = document.getElementById('element');

  element.addEventListener('click', eventListener);
  element.addEventListener('mouseout', eventListener);
  element.addEventListener('mouseover', eventListener);
  element.addEventListener('mouseenter', eventListener);
</script>

Run

Results:

Instance Methods

preventDefault() : undefined

Stops the browser's default behavior from running for the current event. Only cancelable events can have their default behavior prevented. See also stopPropagation() and stopImmediatePropagation().

Example:

<textarea id='textarea'>Try typing</textarea><br>
<input id='checkbox' type='checkbox' checked> preventDefault
<script>
  var textarea = document.getElementById('textarea');
  textarea.addEventListener('keydown', function(event) {
    if (document.getElementById('checkbox').checked) {
      event.preventDefault();
    }
  });
</script>

Run

Results:

stopImmediatePropagation() : undefined

Stops other event listeners on this node and on other nodes in the event route from running. See also stopPropagation() and and preventDefault().

Example:

<div id='parent'>
  Click Me (parent)
  <div id='child'>
    --Click Me (child)
  </div>
</div>
<script>
  var phaseNames = { };
  phaseNames[Event.CAPTURING_PHASE] = 'capture';
  phaseNames[Event.AT_TARGET] = 'atTarget';
  phaseNames[Event.BUBBLING_PHASE] = 'bubble';

  var clickListener = function(event) {
    console.log('phase=' + phaseNames[event.eventPhase] +
                ' target=' + event.target.id +
                ' currentTarget=' + event.currentTarget.id);

    if (event.currentTarget.id === 'parent') {
      event.stopImmediatePropagation();
    }
  };
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  parent.addEventListener('click', clickListener, /* capture = */ true);
  child.addEventListener('click', clickListener);
  parent.addEventListener('click', clickListener);
</script>

Run

Results:

Spec

stopPropagation() : undefined

Stops event listeners on other nodes in the event route from running. Other listeners attached to currentTarget will still run. See also stopImmediatePropagation() and preventDefault().

Example:

<div id='parent'>
  Click Me (parent)
  <div id='child'>
    --Click Me (child)
  </div>
</div>
<script>
  var phaseNames = { };
  phaseNames[Event.CAPTURING_PHASE] = 'capture';
  phaseNames[Event.AT_TARGET] = 'atTarget';
  phaseNames[Event.BUBBLING_PHASE] = 'bubble';

  var clickListener = function(event) {
    console.log('phase=' + phaseNames[event.eventPhase] +
                ' target=' + event.target.id +
                ' currentTarget=' + event.currentTarget.id);

    if (event.currentTarget.id === 'parent') {
      event.stopPropagation();
    }
  };
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  parent.addEventListener('click', clickListener, /* capture = */ true);
  child.addEventListener('click', clickListener);
  parent.addEventListener('click', clickListener);
</script>

Run

Results:

Event Properties

AT_TARGET : Number readonly

Returned by eventPhase when at the target that originated the event.

BUBBLING_PHASE : Number readonly

Returned by eventPhase during the bubbling phase of the event route.

CAPTURING_PHASE : Number readonly

Returned by eventPhase during the capture phase of the event route.

NONE : Number readonly

Returned by eventPhase before the event is routed.

home license contribute feedback toggle light/dark mode