Commentaires

Les événements navigateurs


Arthur, l'apprenti développeurDonc tu m'as parlé des événements

En effet, un événement est quelque chose qui se passe sur la page affiché par ton navigateur, et quand cela se passe, tu souhaites exécuter un code en particulier. Pour commencer avec un exemple simple, tu met un bouton dans ta page et quand l'utilisateur clique sur ce bouton, tu veux afficher un message. Et bien il suffit d'utiliser un addEventListener sur ce bouton, lui préciser que l'événement attendu est un "click" et un callback pour lui préciser le code à exécuter.



Arthur, l'apprenti développeurC'est simple et clair pour le moment.

La récupération de l'événement dans le callback


Ce qu'il faut savoir en plus, c'est que l'on peut passer un paramètre au callback d'un événement, ce paramètre représentera l'événement qui a déclenché cet appel, et on pourra s'en servir pour de nombreuses choses. Par exemple pour un envoie de formulaire, l'événement est un "submit", on peut capter l'événement en javascript pour faire des traitements particulier sur ce formulaire. Le problème étant qu'un submit de formulaire redirige le navigateur vers une nouvelle page, donc le javascript déclenché n'as pas vraiment le temps de s'exécuter. Dans ce cas on peut utiliser la fonction preventDefault pour annuler l'envoie de l'événement, et donc l'envoie du formulaire qui rechargerai la page.

Arthur, l'apprenti développeurJ'ai rien compris

Je te fais un exemple :



Arthur, l'apprenti développeurOk c'est plus clair !

La récupération de l'élément déclencheur dans le callback



Il y a aussi une variable un peu particulière dans un callback d'événement, c'est le "this", il représente l'élément html qui a déclenché cet événement, et ça peut être pratique, car on peut avoir plusieurs éléments qui déclenchent un même événement.



Arthur, l'apprenti développeurJusque là je comprend tout !

Et bien tu as donc tout compris aux événements javascript. Il n'y a rien de plus à savoir.

Arthur, l'apprenti développeurQuoi? Mais tu m'avais dit que c'était quelque chose d'hyper important les événements, ça ne peut pas être que ça !

Si c'est "juste" ça, c'est ce qui va te servir à développer le comportement de ton application pour toutes les interactions de l'utilisateur. Je ne t'ai montré que deux événements, mais le concept reste le même pour tous les autres. Et il en existe de très nombreux, pour les click souris, la saisie au clavier, la gestion de formulaire, les animations css, l'impression de pages et beaucoup d'autres éléments.

Arthur, l'apprenti développeurAh oui en effet, il y a de quoi s'occuper ! Je vais aller manipuler un peu tout ça.

On se revoit demain, pour utiliser les api du navigateur, tu va voir ça aussi c'est intéressant. J'ai terminé cette partie
Demander de l'assistance