EventTarget : Object

EventTargets are Objects that fire events. EventTargets usually expose an onevent property for each event where you can assign a Function to be called when the event fires. You can also use addEventListener() to hook up multiple listeners to the same event.

Spec

Instance Methods

addEventListener 4 variants

addEventListener(type : String, listener : Function, [useCapture : Boolean]) : undefined

listener(event : Event) : undefined

Adds listener to the list of callbacks called when the specified event is fired. If useCapture is true, listener will be called in the capture phase of the event routing (ie, during the walk down the tree to the target instead of on the way up after firing on the target). Unlike using the onevent style of listening to events, addEventListener allows more than one listener to be associated with the event. Use removeEventListener() to stop listening to the event.

Example:

<!-- This example demonstrates adding 'click' listeners and capture/bubbling -->
<div id='div'>
  <button id='button'>click</button>
</div>
<script>
var body = document.body;
body.addEventListener('click', function(event) {
  console.log('body capture');
}, true);

var div = document.getElementById('div');
div.addEventListener('click', function(event) {
  console.log('div capture');
}, true);

var button = document.getElementById('button');
button.addEventListener('click', function(event) {
  console.log('button capture');
}, true);

button.addEventListener('click', function(event) {
  console.log('button bubble');
}, false);

div.addEventListener('click', function(event) {
  console.log('div bubble');
}, false);

body.addEventListener('click', function(event) {
  console.log('body bubble');
}, false);
</script>

Run

Results:

addEventListener(type : String, listener : EventListener, [useCapture : Boolean]) : undefined

addEventListener(type : String, listener : Function, options : Object) : undefined

listener(event : Event) : undefined

options : {

capture :	Boolean	call listener in the capture phase
once :	Boolean	remove `listener` after firing
passive :	Boolean	set to `true` if you'll never call `event.preventDefault()`. Allows browser to provide perf optimizations like smoother scrolling.

}

addEventListener(type : String, listener : EventListener, options : Object) : undefined

options : {

capture :	Boolean	call listener in the capture phase
once :	Boolean	remove `listener` after firing
passive :	Boolean	set to `true` if you'll never call `event.preventDefault()`. Allows browser to provide perf optimizations like smoother scrolling.

}

dispatchEvent(event : Event) : Boolean

Raises event on this. If event.bubbles is true, and this is an Node, the event will propagate through the ancestor hierarchy.

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:

removeEventListener 4 variants

removeEventListener(type : String, listener : Function, [useCapture : Boolean]) : undefined

listener(event : Event) : undefined

removeEventListener(type : String, listener : EventListener, [useCapture : Boolean]) : undefined

removeEventListener(type : String, listener : Function, options : Object) : undefined

listener(event : Event) : undefined

options : {

capture :

Boolean

removes the listener hooked to the capture phase

}

removeEventListener(type : String, listener : EventListener, options : Object) : undefined

options : {

capture :

Boolean

removes the listener hooked to the capture phase

}

Details

EventTarget can also be used as a base class to provide event handling for user defined types.

Example:

class Foo extends EventTarget {
}

const foo = new Foo();
foo.addEventListener('myEvent', e => {
  console.log('myEvent fired. detail:', e.detail);
});

foo.dispatchEvent(new CustomEvent('myEvent', { detail: 'extra data' }));

Run

Results:

home license contribute feedback toggle light/dark mode