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