Contenu principal
Cours : Apprendre à coder > Chapitre 6
Leçon 5: Les événements du DOM- Rendre des pages Web interactives avec les événements
- Ajouter un écouteur d’événement
- Défi : cliquer le chat
- Les types d’événements du DOM
- Utiliser les propriétés d'événement
- Défi : moustache de chat
- Traiter les formulaires avec les événements
- Défi : le texte à trous
- Bloquer le comportement par défaut des événements
- Résumé : les événements du DOM
Résumé : les événements du DOM
Ajouter des écouteurs d'événements
Pour vous assurer que le navigateur appelle une fonction en particulier quand un événement survient sur un élément, vous devez utiliser
document.addEventListener:var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
console.log("Mince alors, vous m'avez cliqué !");
};
buttonEl.addEventListener("click", onButtonClick);Vous pouvez passer de nombreuses chaînes de caractères valides en premier argument, regardez l'article sur les types d'événements.
Si vous souhaitez de l'information sur l'événement qui est survenu, vous pouvez regarder l'objet événement que le navigateur a passé à votre fonction de retour :
var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("Vous avez cliqué en " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);Il existe beaucoup de propriétés dans l'objet événement, vous pouvez regarder la liste complète ici.
Si vous réécrivez le comportement du clic d'un lien, ou le comportement de soumission d'un formulaire, vous pourriez souhaiter appeler
event.preventDefault() afin de bloquer le comportement par défaut du navigateur.Supprimer des écouteurs d'évéments
Si vous n'avez plus besoin d'un écouteur d'événement en particulier, vous pouvez le supprimer en utilisant
removeEventListener :var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("Vous avez cliqué en " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
// plus tard...
faceEl.removeEventListener("click", onFaceClick);Vous souhaitez rejoindre la discussion ?
à quoi peut servir removeEventListener plutôt que d'effacer directement la fonction ?
A part si on veut l'arrêter pour une période pour la remettre plus tard, comme ça on n'a pas à la réécrire(4 votes)