addEventListener
elt.addEventListener('click', maFonction)
(avec elt
qui est un objet de type Élément)elt.addEventListener('click', maFonction)
: on donne en argument le nom de la fonction qui devra être exécutée. Ceci fait référence à l'objet fonction correspondant. Attention la fonction n'est pas exécutée à ce moment, donc pas de parenthèses !let maDiv = document.getElementById('div1'); maDiv.addEventListener('click', clicSurElement); function clicSurElement(event) { console.log("Un clic est capté"); console.log(event); }Démo
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Capteur d'évènement</title> <body> <h1>Capteurs d'évènement</h1> <p id="p1">Attention : mettre le JS à la fin du HTML afin que l'arbre DOM soit bien créé !</p> <script> "use strict"; document.getElementById('p1').addEventListener('click', clicSurElement); </script> </body> </html>
currentTarget
: le noeud du DOM qui a déclenché le callbacktarget
: le noeud du DOM qui a reçu l'évènement en premierscreenX
, screenY
, clientX
, clientY
, etc liste complète key
, code
, ctrlKey
, altKey
, etc liste complèteevent.preventDefault()
: empêcher l'action par défaut de se produire (par ex. activation d'un lien)event.stopPropagation()
: arrêter la propagation de l'évènement dans les couches HTMLelt.removeEventListener('click', clicSurElement)
pour supprimer un capteur d'évènement sur un élément. Les paramètres doivent être les mêmes que ceux qui ont servi à créer le capteur.