Event

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Note : Cette fonctionnalité est disponible via lesWeb Workers.

L'interfaceEvent représente un évènement qui se produit sur unEventTarget.

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éthodeHTMLElement.click() sur un élément, ou en définissant l'évènement puis en l'envoyant à une cible à l'aide deEventTarget.dispatchEvent().

Il existe de nombreux types d'évènements, dont certains utilisent d'autres interfaces dérivées de l'interface principaleEvent. L'interfaceEvent 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 deEventTarget.addEventListener(), ce qui remplace généralement l'utilisation des anciensattributs 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ètresde 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 surEvent 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 parEvent (« évènement » en anglais).

Constructeur

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

Propriétés d'instance

Event.bubblesLecture seule: Un booléen indiquant si l'évènement se propage dans le DOM.
Event.cancelableLecture seule: Un booléen indiquant si l'évènement est annulable.
Event.composedLecture 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.currentTargetLecture 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'unretargeting.
Event.defaultPreventedLecture seule: Indique si l'appel àevent.preventDefault() a annulé l'évènement.
Event.eventPhaseLecture 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.isTrustedLecture 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.srcElementLecture seuleObsolète: Un alias pour la propriété Event.target. Utilisez plutôtEvent.target.
Event.targetLecture seule: Une référence vers l'objet auquel l'évènement a été initialement envoyé.
Event.timeStampLecture 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 parDOMHighResTimeStamp.
Event.typeLecture seule: Le nom identifiant le type de l'évènement.

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

Event.cancelBubbleObsolè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.explicitOriginalTargetNon standardLecture seule: La cible originale explicite de l'évènement.
Event.originalTargetNon standardLecture seule: La cible originale de l'évènement, avant tout retargeting.
Event.returnValueObsolète: Propriété historique encore supportée pour garantir la compatibilité des sites existants. Utilisez plutôt Event.preventDefault() etEvent.defaultPrevented.
Event.scopedLecture seuleObsolè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 sonShadowRoot.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 objetEvent 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

Cette page a été modifiée le8 oct. 2025 par lescontributeurs du MDN.

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

Movatterモバイル変換

Event

Help improve MDN