Event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨juillet 2015⁩.

Note : Cette fonctionnalité est disponible via les Web Workers.

L'interface Event représente un évènement qui se produit sur un EventTarget.

Un évènement peut être déclenché par une action humaine (par exemple, un clic de souris ou une pression sur une touche du clavier) ou généré par des API pour représenter la progression d'une tâche asynchrone. Il peut aussi être déclenché par un programme, par exemple en appelant la méthode HTMLElement.click() sur un élément, ou en définissant l'évènement puis en l'envoyant à une cible à l'aide de EventTarget.dispatchEvent().

Il existe de nombreux types d'évènements, dont certains utilisent d'autres interfaces dérivées de l'interface principale Event. L'interface Event contient les propriétés et méthodes communes à tous les évènements.

De nombreux éléments du DOM peuvent être configurés pour accepter (ou « écouter ») ces évènements et exécuter du code en réponse afin de les traiter (« gérer »). Les gestionnaires d'évènements sont généralement attachés à divers éléments HTML (tels que <button>, <div>, <span>, etc.) à l'aide de EventTarget.addEventListener(), ce qui remplace généralement l'utilisation des anciens attributs de gestion d'évènement en HTML. De plus, lorsqu'ils sont ajoutés correctement, ces gestionnaires peuvent aussi être détachés si besoin grâce à removeEventListener().

Note : Il est tout à fait possible d'attacher plusieurs gestionnaires d'évènement à un seul élément, y compris pour la gestion d'un évènement particulier. Ainsi, des modules de code indépendant peuvent attacher leurs gestionnaires de façon indépendante (par exemple, sur une page web, un module de publicité et un autre module d'analyse pourront tout à fait attacher des gestionnaires pour étudier la consultation d'une vidéo).

Lorsqu'il y a de nombreux éléments imbriqués, chacun ayant ses propres gestionnaires d'évènement, le traitement des évènements peut se révéler compliqué, notamment lorsqu'un élément parent reçoit le même évènement que ses éléments enfants (par exemple pour des évènements qui se déclenchent sur la surface visuelle de l'élément enfant). Dans ce cas, l'ordre du traitement de ces évènements dépend des paramètres de bouillonnement (bubbling) et de capture définis sur chaque gestionnaire ainsi déclenché.

Interfaces basées sur Event

Voici une liste des interfaces basées sur Event avec un lien vers leur documentation dans la référence MDN.

On notera que l'ensemble des interfaces d'évènements ont un nom qui termine par Event (« évènement » en anglais).

Constructeur

Event(): Crée un objet Event et le retourne à l'appelant.

Propriétés d'instance

Event.bubbles Lecture seule: Un booléen indiquant si l'évènement se propage dans le DOM.
Event.cancelable Lecture seule: Un booléen indiquant si l'évènement est annulable.
Event.composed Lecture seule: Un booléen indiquant si l'évènement peut se propager à travers la frontière entre le DOM d'ombre (shadow DOM) et le DOM classique.
Event.currentTarget Lecture seule: Une référence vers la cible actuellement enregistrée pour l'évènement. Il s'agit de l'objet auquel l'évènement est actuellement destiné. Cette valeur peut être modifiée lors d'un retargeting.
Event.defaultPrevented Lecture seule: Indique si l'appel à event.preventDefault() a annulé l'évènement.
Event.eventPhase Lecture seule: Indique quelle phase du flux d'évènement est en cours de traitement. Il s'agit de l'un des nombres suivants : NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
Event.isTrusted Lecture seule: Indique si l'évènement a été initié par le navigateur (après un clic utilisateur, par exemple) ou par un script (via une méthode de création d'évènement, par exemple).
Event.srcElement Lecture seule Obsolète: Un alias pour la propriété Event.target. Utilisez plutôt Event.target.
Event.target Lecture seule: Une référence vers l'objet auquel l'évènement a été initialement envoyé.
Event.timeStamp Lecture seule: L'instant auquel l'évènement a été créé (en millisecondes). Selon la spécification, cette valeur correspond au temps écoulé depuis l'époque Unix, mais en pratique, la définition varie selon les navigateurs. De plus, il est prévu de remplacer ce type par DOMHighResTimeStamp.
Event.type Lecture seule: Le nom identifiant le type de l'évènement.

Propriétés héritées et non standard

Event.cancelBubble Obsolète: Un alias historique de Event.stopPropagation() qu'il convient d'utiliser à la place. Passer sa valeur à true avant de quitter un gestionnaire d'évènement empêche la propagation de l'évènement.
Event.explicitOriginalTarget Non standard Lecture seule: La cible originale explicite de l'évènement.
Event.originalTarget Non standard Lecture seule: La cible originale de l'évènement, avant tout retargeting.
Event.returnValue Obsolète: Propriété historique encore supportée pour garantir la compatibilité des sites existants. Utilisez plutôt Event.preventDefault() et Event.defaultPrevented.
Event.scoped Lecture seule Obsolète: Un booléen indiquant si l'évènement va se propager à travers la racine d'ombre (shadow root) vers le DOM standard. Utilisez plutôt composed.

Méthodes d'instance

Event.composedPath(): Retourne le chemin de l'évènement (un tableau d'objets sur lesquels les écouteurs seront invoqués). Cela n'inclut pas les nœuds dans les arbres d'ombre (shadow trees) si la racine d'ombre (shadow root) a été créée avec son ShadowRoot.mode fermé.
Event.preventDefault(): Annule l'évènement (s'il est annulable).
Event.stopImmediatePropagation(): Pour cet évènement particulier, empêche tous les autres écouteurs d'être appelés. Cela inclut les écouteurs attachés au même élément ainsi que ceux attachés à des éléments qui seront parcourus plus tard (par exemple lors de la phase de capture).
Event.stopPropagation(): Stoppe la propagation de l'évènement plus loin dans le DOM.

Méthodes dépréciées

Event.initEvent() Obsolète: Initialise la valeur d'un objet Event créé. Si l'évènement a déjà été déclenché, cette méthode ne fait rien. Utilisez plutôt le constructeur (Event()).

Spécifications

Specification
DOM # interface-event

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

This page was last modified on ⁨8 oct. 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content