We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Introduction

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.

Enregistrement des écouteurs d'évènements

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 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 EventTarget.addEventListener.

attribut HTML

<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.

Propriétés d'un élément DOM

// 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.

Accès aux interfaces d'évènements

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 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;

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : loella16
Dernière mise à jour par : loella16,