Ce chapitre décrit le modèle d'événement DOM. L'interface Event elle-même est décrite, ainsi que les interfaces pour l'enregistrement des évènements sur les noeuds dans le DOM, les écouteurs d'évènements et d'autres exemples montrant les relations des différentes interfaces d'évènements entre elles.
Il existe un excellent diagramme qui explique clairement les trois phases du flux d'évènements à travers le DOM dans le document sur les évènements DOM Niveau 3.
Voir aussi l'exemple 5 : Propagation des évènements dans le chapitre "Exemples" pour des exemples détaillés sur le déplacement des évènements à travers le DOM.
Il y a 3 moyens d'enregistrer les gestionnaires d'évènements pour un élément DOM.
EventTarget.addEventListener// Supposons que myButton est un élément de bouton
myButton.addEventListener('click', function(){alert('Hello world');}, false);
C'est la méthode à utiliser dans les pages web modernes.
Note : Internet Explorer 6-8 ne prend pas en charge cette méthode, il offre une API similaire {{domxref("EventTarget.attachEvent")}} à la place. Pour la compatibilité entre navigateurs, utilisez l'une des nombreuses bibliothèques JavaScript disponibles.
Plus de détails peuvent être trouvés sur la page de référence {{domxref("EventTarget.addEventListener")}}.
<button onclick="alert('Hello world!')">
Le code JavaScript de l'attribut est passé à l'objet évènement par le paramètre event. La valeur renvoyée est traitée d'une façon spéciale décrite dans la spécification HTML.
Ce moyen devrait être évité. Cela rend le balisage plus grand et moins lisible. Les aspects de contenu / structure et comportement ne sont pas bien séparés, rendant un bogue plus difficile à trouver.
// Supposons que myButton est un élément de bouton
myButton.onclick = function(event){alert('Hello world');};
La fonction peut être définie pour prendre un paramètre d'event. La valeur renvoyée est traitée de façon spéciale décrite dans la spécification HTML.
Le problème avec cette méthode est qu'un seul gestionnaire peut être défini par élément et par évènement.
Les gestionnaires d'évènements peuvent être attachés à divers objets y compris les éléments DOM, le document, l'objet fenêtre, etc. Lorsqu'un évènement se produit, un objet évènement est créé et passé séquentiellement aux écouteurs d'évènements.
L'interface {{domxref("Event")}} est accessible à partir de la fonction gestionnaire, via l'objet événement passé en premier argument. L'exemple simple suivant montre comment un objet d'événement est transmis à la fonction de gestionnaire d'événements et peut être utilisé à partir d'une telle fonction.
function foo(evt) {
// le paramètre evt est automatiquement assigné à l'objet évènement
alert(evt);
}
table_el.onclick = foo;