Créer des écouteurs d’événements

element.addEventListener

La méthode addEventListener peut être appliquée sur un élément pour lui ajouter un écouteur d’événement associé à une fonction à exécuter.

les événements

Les événements sont divers et peuvent varier selon l’élément, mais on peut citer :

  • click
  • mouseover
  • mouseout
  • il y en a bien d’autres…

la fonction

La fonction sera appelé lors de l’événement avec en paramètre un objet Event contenant différents informations sur l’événement, par exemple la cible de l’événement (Event.target).

Il est aussi possible d’utiliser une fonction anonyme.

Exemple

document.body.addEventListener( 'click' , function ( evenement ) {
   console.log ( evenement );
})

document.body.addEventListener( 'click' , ma_fonction );

function ma_fonction ( evenement ) {
   console.log ( evenement );
}

exercice

Complétez cet exercice .