JavaScript 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

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

}

home license contribute feedback