Dans cette leçon vidéo en français, le formateur explique ce que sont les événements en JavaScript, comment le gestionnaire d’événements détecte les actions de l’utilisateur et déclenche le code associé. Il montre d’abord comment attacher un gestionnaire directement dans l’attribut HTML d’un élément (ex. onclick, onmouseover) en insérant du code JavaScript entre guillemets, puis il décrit les limites de cette approche pour des scripts plus longs. Il introduit ensuite la pratique recommandée : déclarer une fonction JavaScript dans une balise <script> (souvent dans <head>) et appeler cette fonction depuis l’attribut d’événement. Le cours parcourt ensuite une longue liste d’événements courants (click, mouseover, mouseout, dblclick, load, keydown, keyup, focus, blur, mousemove, change, resize, submit, drag‑and‑drop) en illustrant chaque cas par un petit exemple. Enfin, il mentionne brièvement la notion de propagation d’événements, qui sera abordée plus tard. Le ton est pédagogique, avec des démonstrations en direct et des explications claires, visant à familiariser les débutants avec la manipulation d’événements en JavaScript.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui nous allons traiter les événements. Les événements sont les actions de l'utilisateur qui peuvent survenir sur le navigateur et auxquelles on va associer des traitements. On peut dire alors que les événements sont les déclencheurs de tous les scripts que l'on va créer par la suite. Les événements sont gérés par le gestionnaire d'événements JavaScript. Ce gestionnaire détecte chacun des événements et si on a prévu un traitement à l'un de ces événements-là, alors il sera exécuté. Notez qu'il existe d'innombrables événements en JavaScript, mais nous on va se contenter des plus basiques et bien sûr on aura l'occasion de voir les événements au fur et à mesure qu'on progresse dans les cours. Mais les événements les plus connus sont le clic sur un objet comme les boutons ou bien les images, le chargement de la page ou d'une image, le survol d'un objet quelconque, le redimensionnement du navigateur, le clic sur un bouton submit, etc. Par exemple, on va prévoir un bouton de type input et on va essayer de lui associer un événement JavaScript de la manière suivante. Maintenant que nous avons créé notre bouton, il suffit de lui associer un événement pour dire au JavaScript si l'événement est détecté sur cet objet-là, alors une action va s'ensuivre. Dans notre cas, on va prévoir l'événement click, c'est-à-dire le fait de cliquer sur ce bouton va donner lieu à l'exécution du code JavaScript souhaité. Alors on va procéder de cette manière, on va mettre onclick égal. Maintenant onclick, il va tout simplement demander au gestionnaire d'événements de prendre en considération l'événement clic qui peut survenir sur le bouton courant. Entre les guillemets, ce qui est autorisé à mettre c'est seulement de la syntaxe JavaScript. Si vous vous rappelez bien lors de la séance des bases de JavaScript, j'ai dit que pour intégrer un script JavaScript on met ça généralement entre les balises script et et /script, mais ce n'est pas la seule méthode de le faire. Justement, si vous déclarez un événement sur un objet, vous pouvez intégrer votre code directement entre les guillemets de cette manière. Par exemple, là je vais mettre alert et je mets ici bonjour. Ça veut dire le fait de cliquer sur le bouton courant va exécuter l'instruction JavaScript suivante, c'est tout simplement l'affichage du message bonjour dans une boîte de dialogue alert. Alors j'exécute maintenant pour voir le résultat. Bon, le bouton il est là, Il suffit de cliquer et j'ai maintenant le message qui s'affiche. Alors vous avez bien remarqué que le fait de cliquer sur le bouton c'est le déclencheur de l'événement clic à la suite duquel un code JavaScript sera exécuté aussitôt. En réalité ce n'est pas la seule manière de déclarer un événement. Il y a plusieurs autres méthodes que l'on peut faire comme par exemple associer un événement directement à un objet sur le DOM ou bien carrément gérer ce qu'on appelle le flux de propagation des événements mais ce sont des méthodes que l'on va voir un peu plus loin en JavaScript. Pour le moment, on va se contenter de la méthode suivante, c'est-à-dire un gestionnaire d'événements local sur l'objet courant. Maintenant, nous avons vu l'événement click, c'est-à-dire que si on clique sur le bouton, l'instruction JavaScript suivante sera exécutée. On peut d'ailleurs changer l'événement, on va mettre par exemple onMouseOver. Vous avez remarqué que j'ai capitalisé le M et le O, mais ce n'est pas demandé au départ parce que n'oubliez pas que ça, ça reste un attribut HTML. Ça veut dire que ça ne vérifie pas vraiment la casse, mais juste question lisibilité, bon, vaut mieux mettre les mots comme ça en capitalisé pour dire que c'est une association de plusieurs mots-clés. On mouseover, ça veut dire que si je survole l'objet, c'est-à-dire si je mets le curseur de la souris sur l'objet bouton, dans ce cas alors le message bonjour sera exécuté. Bon, je vais actualiser. Maintenant il suffit de passer au-dessus du bouton et directement vous aurez l'événement qui est détecté, bien sûr à la suite duquel il y a un code JavaScript qui vient s'exécuter. Donc là vous avez remarqué que j'ai intégré directement mon script à l'intérieur des guillemets. Parce que c'est un petit script, alors ça pose aucun problème. Mais si ça contient beaucoup d'instructions, dans ce cas le code deviendra beaucoup plus encombrant et ce n'est pas une bonne chose. Alors ce qu'on va faire, c'est tout simplement déclarer nos instructions au sein d'une fonction JavaScript que l'on appellera à la suite de l'événement. Par exemple, là imaginez que la fonction que je vais déclarer s'appelle f tout court. Bon, maintenant c'est à moi de déclarer la fonction f et là de préférence il faut déclarer avant. Alors là je vais mettre dans la balise head. Là on va déclarer le tag script et là on mettra la fonction, donc function f, et je mets à l'intérieur les instructions que je souhaite, par exemple alerte bonjour à tous. Maintenant quand j'exécute, c'est-à-dire quand je survole mon bouton, le message bonjour à tous sera affiché dans la boîte de dialogue alerte comme ceci. Bon, il n'y a pas que onMouseOver, il y a aussi onMouseOut. onMouseOut, c'est le fait de quitter l'objet après l'avoir survolé. Dans ce cas, si j'actualise, quand je survole le bouton, il ne se passe rien, mais quand je quitte, alors l'événement est détecté et le message est affiché. Il y a aussi onDoubleClick. onDoubleClick, ça veut dire quand je clique 2 fois de suite sur le même objet. Quand j'exécute, alors je clique une seule fois, il se passe rien. Une deuxième fois, il se passe rien non plus. Mais quand je clique deux fois de suite, dans ce cas, l'événement est détecté. Il y a aussi onload. Donc load, c'est le fait de charger quelque chose. Généralement, soit on charge la page entière ou bien une image quelconque. Bon, là, on va dire par exemple que quand je charge la page, ça veut dire que tout le contenu HTML est chargé sur le navigateur, la fonction f sera exécutée. Bon, pour déclarer onload, on va pas mettre ça n'importe où, mais généralement soit sur la balise body ou bien sur les balises img en général. Alors là, dans body, on va mettre onload égale la fonction f, c'est-à-dire que cette fonction sera appelée au chargement de la page. Et aussi, quand je vais cliquer 2 fois sur mon bouton, la même fonction sera exécutée. Quand j'actualise, vous avez vu que le message s'affiche aussitôt parce que la page maintenant est chargée. Bon, quand je clique, bon, là aussi, quand je clique 2 fois sur le bouton, le même message est affiché parce que c'est la même fonction que j'ai appelé 2 fois. Il existe d'autres événements comme par exemple onKeyDown et onKeyUp qui font référence au clavier. onKeyDown, c'est le fait de relâcher une touche du clavier après avoir appuyé dessus, et onKeyDown, c'est le fait d'appuyer sur une touche du clavier, bon n'importe quelle touche. Voilà, par exemple si je mets input type text, name, je vais l'appeler zone texte, et là on mettra OnKeyUp. Là, je vais prévoir ma fonction g et je mettrai alerte événement détecté. Il suffit d'appuyer sur une touche et la relâcher pour exécuter la fonction g. Bon, maintenant ma zone de texte est Il est là, je clique. Bon, une fois que j'appuie sur une touche, il suffit que je relâche la touche et l'événement sera automatiquement détecté et le message affiché. Il y a aussi l'événement onFocus qui permet de détecter si un champ est activé pour l'écriture. Par exemple, une zone de texte, pour écrire dedans, il faut d'abord cliquer dessus ou bien directement passer à travers la touche tabulation pour accéder à ce champ afin de pouvoir le saisir. Dans ce cas, si le champ est activé, ça veut dire qu'il est prêt à être saisi. Dans ce cas, l'événement focus est détecté. Blur, c'est le fait de quitter le champ qui a été activé. Mousemove, il détecte le moindre changement de l'emplacement du curseur de la souris, c'est-à-dire si vous faites bouger votre souris, alors dans ce cas mousemove sera aussitôt détecté. Il existe aussi change qui permet de détecter le changement généralement des zones de texte ou bien des listes de sélection qui contiennent par défaut une valeur. Si vous changez cette valeur à une autre, dans ce cas l'événement change sera détecté. Resize permet de détecter le moindre changement des dimensions de la fenêtre de navigation. Submit permet de détecter le clic sur n'importe quel bouton de type submit d'un formulaire. Mais comme j'ai dit au début, il existe d'innombrables événements JavaScript. D'ailleurs, il y a même des événements qui sont dédiés à des applications particulières, comme par exemple le drag and drop qui contient ses propres événements comme dragstart, dragover, dragenter et drop, etc. Mais on aura bien sûr l'occasion de découvrir tous ces événements en détail au fur et à mesure qu'on progresse dans les cours. Merci pour votre attention et à la vidéo prochaine!
