Event : Object

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|MouseEvent%%,
%%/KeyboardEvent|KeyboardEvent%%,
and
%%/ProgressEvent|ProgressEvent%% for some derivations of Event.

Spec:
https://dom.spec.whatwg.org/#interface-event

----
new Event( \
  type : String,  \
  [eventInit : { \
     bubbles : Boolean, \
     cancelable: Boolean \
  }]) : Event

Creates a new Event. Use %%/EventTarget#dispatchEvent|**dispatchEvent()**%% to
fire the event.

<htmlexample>
<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>
</htmlexample>

----
instance.type : String

A string describing the type of event.

<htmlexample>
<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>
</htmlexample>

ReadOnly:
true

----
instance.target : Object

The **Object** that originated this event. See also %%#currentTarget|**currentTarget**%%.

<htmlexample>
<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>
</htmlexample>

ReadOnly:
true

----
instance.currentTarget : Object

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

<htmlexample>
<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>
</htmlexample>

ReadOnly:
true

----
instance.eventPhase : Number

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

<htmlexample>
<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>
</htmlexample>

ReadOnly:
true

----
instance.bubbles : Boolean

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

ReadOnly:
true

----
instance.cancelable : Boolean

Returns **true** if the event can be canceled (by calling %%#preventDefault|**preventDefault()**%%).

ReadOnly:
true

----
instance.timeStamp : Number

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

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

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

ReadOnly:
true

----
instance.defaultPrevented : Boolean

Returns **true** if %%#preventDefault|**preventDefault()**%% has been called on
**this**.

<htmlexample>
<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>
</htmlexample>

ReadOnly:
true

----
instance.isTrusted : Boolean

ReadOnly:
true

----
prototype.stopPropagation() : undefined

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

<htmlexample>
<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>
</htmlexample>

----
prototype.stopImmediatePropagation() : undefined

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

<htmlexample>
<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>
</htmlexample>


Spec:
https://dom.spec.whatwg.org/#dom-event-stopimmediatepropagation

----
prototype.preventDefault() : undefined

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

<htmlexample>
<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>
</htmlexample>

----
NONE : Number

Returned by %%#eventPhase|**eventPhase**%% before the event is routed.

ReadOnly:
true

----
CAPTURING_PHASE : Number

Returned by %%#eventPhase|**eventPhase**%% during the capture phase of the
event route.

ReadOnly:
true

----
AT_TARGET : Number

Returned by %%#eventPhase|**eventPhase**%% when at the target that originated the event.

ReadOnly:
true

----
BUBBLING_PHASE : Number

Returned by %%#eventPhase|**eventPhase**%% during the bubbling phase of the
event route.

ReadOnly:
true