Méthode : HTMLElement.addEventListener()

Détecte l'événement myEvent et exécute ToDo() lorsque myEvent est déclenché

Syntaxe
elt.addEventListener(String myEvent, Function ToDo)

Compatible tous navigateurs

Oui

Description
Créé un détecteur (Listener) de l'événement myEvent sur l'objet elt et lance la fonction ToDo() dès que l'événement est déclenché.
Permet de créer des événements par programmation
Un événement créé peut être supprimé par removeEventListener().

La chaîne myEvent est une chaîne précise facile à trouver. Tous les attributs HTML onMyEvent deviennent la chaîne MyEvent : onload devient donc load.

Les événements sont de type Event

Equivalent dans d'autres langages

Equivalent en jQuery à $.on() :

Attache un gestionnaire d'événement à l'élément.

Exemple 1 : Equivalent onclick et click

Code source

Résultat

Mon div 1 : L'événement click est déclaré dans le code HTML par onclick

Mon div 2 : l'événement click est ajouté par addEventListener("click")

Cliquez sur les DIV pour déclencher l'événement

Emulation de la console

Explication

Gestion de click dans les attributs dans myDiv1 ou par programmation sur myDiv2.

Exemple 2 : Détection du scroll

Code source

<div id="posTop"></div>

<script>
console.log("Scroller la page pour voir la position s'afficher");
window.addEventListener('scroll', function(event) {
var posTop=Math.abs(document.body.getBoundingClientRect().top);
document.getElementById("posTop").innerHTML=posTop+" px";
});
</script>

Résultat

Emulation de la console

Explication

Détection du scroll de la page avec affichage de la position de la page grâce à getBoundingClientRect().

Page en rapport
Introduction au DHTML

Page mise à jour le 15/11/2021