EventTarget.dispatchEvent

  • Revision slug: Web/API/EventTarget.dispatchEvent
  • Revision title: EventTarget.dispatchEvent
  • Revision id: 409325
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment

Revision Content

Dispatches an {{domxref("Event")}} at the specified {{domxref("EventTarget")}}, invoking the affected {{domxref("EventListener")}}s in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) apply to events dispatched manually with dispatchEvent().

Syntax

canceled = target.dispatchEvent(event)
  • event is the {{domxref("Event")}} object to be dispatched.
  • target is used to initialize the {{domxref("Event", "", "target")}} and determine which event listeners to invoke.
  • The return value is false if at least one of the event handlers which handled this event called {{domxref("Event.preventDefault()")}}. Otherwise it returns true.

Notes

dispatchEvent is the last step of the create-init-dispatch process, which is used for dispatching events into the implementation's event model. The event can be created using document.createEvent method and initialized using initEvent or other, more specific, initialization methods, such as initMouseEvent or initUIEvent.

See also the Event object reference.

Example

See Creating and triggering events.

Specification

Revision Source

<p>Dispatches an {{domxref("Event")}} at the specified {{domxref("EventTarget")}}, invoking the affected {{domxref("EventListener")}}s in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) apply to events dispatched manually with <code>dispatchEvent()</code>.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<em>canceled</em> = <em>target</em>.dispatchEvent(<em>event</em>)
</pre>
<ul>
  <li><code>event</code> is the {{domxref("Event")}} object to be dispatched.</li>
  <li><code>target</code> is used to initialize the {{domxref("Event", "", "target")}} and determine which event listeners to invoke.</li>
  <li>The return value is <code>false</code> if at least one of the event handlers which handled this event called {{domxref("Event.preventDefault()")}}. Otherwise it returns <code>true</code>.</li>
</ul>
<h2 id="Notes" name="Notes">Notes</h2>
<p><code>dispatchEvent</code> is the last step of the create-init-dispatch process, which is used for dispatching events into the implementation's event model. The event can be created using <a href="/en-US/docs/DOM/document.createEvent" title="DOM/document.createEvent">document.createEvent</a> method and initialized using <a href="/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">initEvent</a> or other, more specific, initialization methods, such as <a href="/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">initMouseEvent</a> or <a href="/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">initUIEvent</a>.</p>
<p>See also the <a href="/en-US/docs/DOM/event" title="DOM/event">Event object reference</a>.</p>
<h2 id="Example" name="Example">Example</h2>
<p>See <a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events" title="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering events</a>.</p>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent">DOM Level 2 Events: dispatchEvent</a></li>
</ul>
<!--languages( { "es": "es/DOM/element.dispatchEvent", "fr": "fr/DOM/element.dispatchEvent", "ja": "ja/DOM/element.dispatchEvent", "pl": "pl/DOM/element.dispatchEvent" } )-->
Revert to this revision