---
title: Event
slug: Web/API/Event
tags:
  - API
  - DOM
  - Evènement
  - Interface
  - Reference
  - interface utilisateur
translation_of: Web/API/Event
---
<p>{{APIRef("DOM")}}</p>

<p>L'interface <code><strong>Event</strong></code> <span id="result_box" lang="fr"><span>représente tout événement qui a lieu dans le DOM ;</span> <span>certains sont générés par l'utilisateur (tels que des événements de souris ou de clavier), tandis que d'autres sont générés par des API (par exemple, des événements indiquant qu'une animation est terminée, qu'une vidéo a été suspendue, etc.).</span> <span>Il existe plusieurs types d'événements, dont certains utilisent d'autres interfaces basées sur l'interface principale <code>Event</code>.</span> <code>Event</code><span> elle-même contient les propriétés et méthodes communes à tous les événements.</span></span></p>

<h2 id="Interfaces_basées_sur_Event"><span lang="fr"><span>Interfaces basées sur <code>Event</code></span></span></h2>

<p> <span id="result_box" lang="fr"><span>Voici une liste d'interfaces basées sur l'interface principale </span></span> <code>Event</code> <span lang="fr"><span>, avec des liens vers leur documentation respective dans la référence de l'API MDN.</span> <span>Notez que toutes les interfaces d'événements ont des noms qui se terminent par "Event".</span></span></p>

<div class="index">
<ul>
 <li>{{domxref("AnimationEvent")}}</li>
 <li>{{domxref("AudioProcessingEvent")}}</li>
 <li>{{domxref("BeforeInputEvent")}}</li>
 <li>{{domxref("BeforeUnloadEvent")}}</li>
 <li>{{domxref("BlobEvent")}}</li>
 <li>{{domxref("ClipboardEvent")}}</li>
 <li>{{domxref("CloseEvent")}}</li>
 <li>{{domxref("CompositionEvent")}}</li>
 <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
 <li>{{domxref("CustomEvent")}}</li>
 <li>{{domxref("DeviceLightEvent")}}</li>
 <li>{{domxref("DeviceMotionEvent")}}</li>
 <li>{{domxref("DeviceOrientationEvent")}}</li>
 <li>{{domxref("DeviceProximityEvent")}}</li>
 <li>{{domxref("DOMTransactionEvent")}}</li>
 <li>{{domxref("DragEvent")}}</li>
 <li>{{domxref("EditingBeforeInputEvent")}}</li>
 <li>{{domxref("ErrorEvent")}}</li>
 <li>{{domxref("FetchEvent")}}</li>
 <li>{{domxref("FocusEvent")}}</li>
 <li>{{domxref("GamepadEvent")}}</li>
 <li>{{domxref("HashChangeEvent")}}</li>
 <li>{{domxref("IDBVersionChangeEvent")}}</li>
 <li>{{domxref("InputEvent")}}</li>
 <li>{{domxref("KeyboardEvent")}}</li>
 <li>{{domxref("MediaStreamEvent")}}</li>
 <li>{{domxref("MessageEvent")}}</li>
 <li>{{domxref("MouseEvent")}}</li>
 <li>{{domxref("MutationEvent")}}</li>
 <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
 <li>{{domxref("PageTransitionEvent")}}</li>
 <li>{{domxref("PointerEvent")}}</li>
 <li>{{domxref("PopStateEvent")}}</li>
 <li>{{domxref("ProgressEvent")}}</li>
 <li>{{domxref("RelatedEvent")}}</li>
 <li>{{domxref("RTCDataChannelEvent")}}</li>
 <li>{{domxref("RTCIdentityErrorEvent")}}</li>
 <li>{{domxref("RTCIdentityEvent")}}</li>
 <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
 <li>{{domxref("SensorEvent")}}</li>
 <li>{{domxref("StorageEvent")}}</li>
 <li>{{domxref("SVGEvent")}}</li>
 <li>{{domxref("SVGZoomEvent")}}</li>
 <li>{{domxref("TimeEvent")}}</li>
 <li>{{domxref("TouchEvent")}}</li>
 <li>{{domxref("TrackEvent")}}</li>
 <li>{{domxref("TransitionEvent")}}</li>
 <li>{{domxref("UIEvent")}}</li>
 <li>{{domxref("UserProximityEvent")}}</li>
 <li>{{domxref("WebGLContextEvent")}}</li>
 <li>{{domxref("WheelEvent")}}</li>
</ul>
</div>

<h2 id="L.27interface_DOM_Event" name="L.27interface_DOM_Event">Constructeur</h2>

<p><span class="comment">L'interface DOM &lt;code&gt;event&lt;/code&gt; est exposée dans les objets &lt;code&gt;event&lt;/code&gt; qui sont passés aux gestionnaires d'évènements sur divers éléments du DOM.</span></p>

<dl>
 <dt>{{domxref("Event.Event", "Event()")}}</dt>
 <dd>Crée un objet Event le retournant à l'appelant.</dd>
</dl>

<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>

<dl>
 <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
 <dd>un booléen indiquant si l'évènement se propage vers le haut dans le DOM ou non.</dd>
 <dt>{{domxref("Event.cancelBubble")}}</dt>
 <dd>u<span id="result_box" lang="fr"><span>n alias historique de {{domxref ("Event.stopPropagation ()")}}.</span> <span>Définir sa valeur sur <code>true,</code> avant qu'elle revienne d'un gestionnaire d'événements, empêche la propagation de l'événement.</span></span></dd>
 <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
 <dd>Un booléen indiquant si l'évènement est annulable.</dd>
 <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
 <dd><span id="result_box" lang="fr"><span>Un booléen indiquant si l'événement peut ou non traverser la frontière entre le DOM shadow et le DOM normal.</span></span></dd>
 <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
 <dd><span id="result_box" lang="fr"><span>Une référence à la cible actuellement enregistrée pour l'événement.</span> <span>C'est l'objet auquel l'événement doit actuellement être envoyé ;</span> <span>il est possible que cela ait été modifié au cours du reciblage.</span></span></dd>
 <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
 <dd>Un {{jsxref("Array")}} (<em>tableau</em>) de {{domxref("Node")}}  DOM à travers lesquels l'event a été propagé.</dd>
 <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
 <dd>indique si {{domxref("event.preventDefault()")}} a été appelé ou non dans l'événement.</dd>
 <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
 <dd>indique dans quelle phase de l'évènement on se trouve actuellement.</dd>
 <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
 <dd>La cible explicite originale de l'évènement (spécifique à Mozilla).</dd>
 <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
 <dd>La cible originale de l'évènement, avant toute modification de celle-ci (spécifique à Mozilla).</dd>
 <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt>
 <dd>une alternative non standard (de versions anciennes de MS IE) de {{domxref("Event.preventDefault()")}} et {{domxref("Event.defaultPrevented")}}.</dd>
 <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
 <dd>Un alias non standard (d'anciennes versions de MS IE) pour {{domxref("Event.target")}}.</dd>
 <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
 <dd>une référence à la cible vers laquelle l'évènement était originellement destiné.</dd>
 <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
 <dd>Le moment de création de l'évènement, en millisecondes. <span id="result_box" lang="fr"><span>Par spécification, cette valeur est le temps écoulé depuis le moment, mais en réalité les définitions des navigateurs varient ;</span> <span>en outre, le travail est en cours pour le changer en </span></span> {{domxref("DOMHighResTimeStamp")}}.</dd>
 <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
 <dd>Le nom de l'évènement (insensible à la casse).</dd>
 <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
 <dd>indique si l'évènement est initié par le navigateur ou non (après un click d'utilisateur ou par un script utilisant une méthode de création d'évènement comme <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/initEvent">event.initEvent</a>)</dd>
</dl>

<h3 id="Propriétés_obsolètes">Propriétés obsolètes</h3>

<dl>
 <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
 <dd>un {{jsxref("Boolean")}} indiquant si l'événement donné peut être propagé à travers la racine shadow dans le DOM standard. Cette propriété a été renommée {{domxref("Event.composed", "composed")}}.</dd>
</dl>

<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>

<dl>
 <dt>{{domxref("Event.createEvent()")}} </dt>
 <dd>Crée un nouvel <code>Event</code> (<em>évènement</em>) qui doit alors être initialisé par l'appel à la méthode <code>initEvent()</code>.</dd>
 <dt>{{domxref("Event.composedPath()")}}</dt>
 <dd>Renvoie le chemin de l'événement (objets sur lesquels les écouteurs seront appelés). Cela n'inclut pas les noeuds dans les arbres shadow si la racine shadow a été créée avec son {{domxref("ShadowRoot.mode")}} fermé.</dd>
 <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
 <dd>initialise la valeur d'un évènement créé. Si l'évènement a déjà été propagé, la méthode ne produit rien.</dd>
 <dt>{{domxref("Event.preventDefault()")}}</dt>
 <dd>Annule l'évènement (s'il est annulable).</dd>
 <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
 <dd>Pour cet évènement particulier, aucun autre écouteur ne peut être appelé.  <span id="result_box" lang="fr"><span>Ni ceux attachés au même élément, ni ceux attachés aux éléments qui seront traversés plus tard (en phase de capture, par exemple)</span></span></dd>
 <dt>{{domxref("Event.stopPropagation()")}}</dt>
 <dd>Arrête la propagation ultérieure d'évènements dans le DOM.</dd>
</dl>

<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>

<dl>
 <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
 <dd>Empêche l'évènement de se propager. Obsolète, utilisez la méthode {{domxref("event.stopPropagation")}} à la place.</dd>
 <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
 <dd>Obsolète, utilisez la méthode {{domxref("event.stopPropagation")}} à la place.</dd>
</dl>

<dl>
 <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
 <dd>Non standard. Retourne la valeur de {{domxref("Event.defaultPrevented")}}. Utilisez à la place {{domxref("Event.defaultPrevented")}} .</dd>
</dl>

<h2 id="Spécifications">Spécifications</h2>

<p>Spécification Statut Commentaire {{SpecName('DOM WHATWG', '#interface-event', 'Event')}} {{Spec2('DOM WHATWG')}}  </p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>



<p>{{Compat("api.Event")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>Types d'évènements disponibles : <a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence Event</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparison_of_Event_Targets">Comparaison des cibles d'Event</a> (<span id="result_box" lang="fr"><span>target vs currentTarget vs relatedTarget vs originalTarget</span></span> )</li>
 <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements personnalisés</a></li>
 <li><span class="short_text" id="result_box" lang="fr"><span>Pour les développeurs de Firefox :</span></span>
  <ul>
   <li><a href="https://developer.mozilla.org/fr/docs/Listening_to_events_in_Firefox_extensions">Écouter des évènements dans les extensions Firefox</a></li>
   <li><a href="https://developer.mozilla.org/fr/docs/Listening_to_events_on_all_tabs">Écouter des événements sur tous les onglets</a></li>
  </ul>
 </li>
</ul>