====== Evenements ======
La gestion des Evenements, telle que décrite dans la [[https://developer.mozilla.org/fr/docs/DOM/event|documentation]] du Mozilla Developper Network permet l'enregistrement des évènements sur les nœuds du DOM.
Si vous n'êtes pas familier avec la notion de [[dom_fr|DOM]], faites au moins le début des exercices.
Les gestionnaires et "écouteurs" (listeners) d'évènements permettent –entre autres– de déclencher des actions suite à une interaction de l'utilisateur.
===== addEventListener =====
[[https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener|addEventListener]] permet de déclencher une action lorsqu'un événement est lancé sur un élément du DOM, par exemple quand on clique sur un lien.
==== click alert ====
Faites en sorte que quand on clique sur le lien, ça affiche "bonjour" dans un alert.
events | click
ceci est un lien
==== click console.log ====
''%%console.log()%%'' permet d'afficher un message dans la console de javascript.
console.log("hello");
En utilisant l'exercice précédent, au lieu d'afficher un message en alert, affichez-le dans la console.
==== mousemove ====
L'événement mousemove permet de capturer l'événement de déplacement de souris au-dessus de l'événment choisi.
Si l'élément est ''%%document%%'', alors on capture les déplacements de souris au-dessus de la page HTML.
A partir de l'exercice suivant, affichez un message en console log à chaque fois que la souris bouge.
events | mousemove
Passez la souris au-dessus du document
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
rure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
ariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
eserunt mollit anim id est laborum.
==== mouseover et mouseout ====
L'événement ''%%mouseover%%'' capture les déplacements de la souris quand elle survole l'élément fixé. ''%%mouseout%%'' capture l'événement de déplacement de la souris qui quitte l'élément.
Le code ci-dessous ne capture que les événements ''%%mouseover%%'' ajoutez-y un événement ''%%mouseout%%'' qui affiche en ''%%cpnsole.log%%'' quand la souris quitte l'élément.
events | mouseover
Survolez le paragraphe
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
==== keyup ====
L'événement ''%%keyup%%'' permet de savoir si une touche du clavier a été pressée.
Il existe 3 événements pour capturer les touches du clavier : keydown, keypress et keyup.
Dans cet exercice, capturez les touches qui ont été pressées lors de la consultation de la page. A chaque fois qu'on appuie sur une touche, faites un ''%%console.log%%'' qui affiche "vous avez pressé une touche".
events | keyup
Appuyez sur une touche
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
==== load ====
Il existe aussi des événements qui ne vont pas directement écouter des interactions avec l'utilisateur, parmi ceux-ci, le plus fréquent est l'événement ''%%load%%'' qui permet de savoir si un document est chargé.
Ceci permet à javascript de se lancer uniquement quand la age (donc le DOM) est chargé.
Par exemple, ce code ne peut pas fonctionner parce que au moment où le javascript est lancé, le paragraphe ''parag'' n'existe pas encore.
events | no load
Ca ne marche pas
Il est recommandé de placer le javascript dans le >head<, or, si on déclenche
du javascript qui interragit avec le DOM avant que celui-ci soit chargé, ça plante.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
Vous pouvez solutionner ce problème en déplaçant le ''%%%%'' en bas du document, juste avant le ''%%