In this French‑language tutorial, the presenter walks through the JavaScript Event object, explaining how it is automatically created when an event fires and how it provides a wealth of information useful for interactive web programming. The lesson starts with a simple click handler on a div (identified as "orange") and shows how to log the event’s type. It then contrasts the target property (the deepest element under the cursor at the moment of the event) with currentTarget (the element on which the listener was attached), demonstrating the difference by clicking on nested divs. The speaker proceeds to explore mouse‑button detection via the button property, keyboard detection via keyCode (including ASCII codes for letters and the Enter key), and mouse‑position tracking using clientX and clientY, adjusting coordinates relative to the element with offsetLeft/offsetTop. Modifier‑key flags shiftKey, altKey, and ctrlKey are also shown. Finally, the tutorial covers event flow control: the bubbling phase versus capture, how stopPropagation can halt propagation, and how preventDefault cancels a browser’s default action (e.g., form submission). Throughout, live code snippets are executed and console output is displayed, reinforcing each concept. The video ends with a brief recap and invitation to the next lesson.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui nous allons voir l'objet Event. L'objet Event est un objet qui est créé automatiquement en JavaScript suite au déclenchement d'un événement. Cet objet nous fournit plein d'informations qui peuvent nous être très utiles dans un programme JavaScript. À titre d'exemple, dans ce code, Nous allons essayer de créer un gestionnaire d'événements qui concerne la balise identifiée par orange. Nous allons donc mettre le code suivant: document.getElementById, on va mettre ici l'identifiant orange, point, l'événement concerné c'est clic, on va donc mettre onclick et on déclare une fonction anonyme. Dans celle-ci nous allons faire appel à l'objet event pour voir le genre d'informations que l'on peut en extraire. Alors on va mettre par exemple console.log et on va afficher l'information qui concerne l'événement lui-même. Donc on va mettre ici l'objet event.type. Donc type est un attribut qui permet de retourner la nature de l'événement qui a été déclenché. Bon, on sait déjà que l'événement c'est clic, mais on va quand même en avoir le cœur net. Dans ce cas, quand on exécute et quand on clique sur la la zone concernée, on va voir que l'événement qui est déclenché, c'est bien un clic. Il y a aussi target. target, ça retourne l'objet qui a déclenché l'événement, mais en réalité, ce n'est pas l'objet lui-même, mais l'objet survolé au moment du déclenchement de l'événement. Pour mieux comprendre le principe, voilà ce qu'on va faire. On exécute. Souvenez-vous qu'on a prévu l'événement sur la div orange. Donc maintenant quand je clique sur la div orange, donc c'est la div qui m'a été retournée en tant qu'élément. Mais regardez ce qui va se passer quand je vais cliquer sur la div jaune. Maintenant c'est la div jaune qui nous est retournée, bien qu'elle n'est pas concernée par l'événement. Alors ça c'est le rôle de target. Target, il fournit l'élément le plus profond survolé par le curseur de la souris au moment de déclenchement de l'événement. Mais si on veut à tout prix retourner l'élément qui a déclenché l'événement, quel que soit l'objet qui est survolé, dans ce cas on va remplacer target par currentTarget. Comme ça. On exécute. Bon, si on clique sur la div orange, on a bien donc l'élément orange. Et si on clique sur la div jaune, on a toujours orange. Donc la différence entre target et currentTarget, c'est bien cela. Il y a aussi la propriété button. Donc la propriété button fait référence à la souris. Comme vous le savez, une souris conventionnelle possède entre 2 et 3 boutons et chacun de ces boutons peut être identifié à l'aide de JavaScript. Dans ce cas, on va changer la l'événement, au lieu de mettre onclick, on va mettre onMouseDown. Voilà, maintenant on va voir quel est le bouton qui a été enclenché au moment de la création de l'événement. Alors on actualise. Quand je clique, bon, ça m'affiche 0 parce que j'ai cliqué avec le bouton gauche. Bon, quand je clique avec le bouton droit, j'ai la valeur 2. Dans mon cas, j'ai pas de bouton du milieu, sinon il devrait retourner la valeur 1. Alors ça, c'est ce qui concerne l'attribut button. Il y a aussi l'attribut keycode. Keycode, il permet de retourner l'information sur la touche du clavier qui a été enfoncée au moment de la création de l'événement. Alors là, on va essayer de créer une zone de texte. Par exemple, on va mettre textarea avec un ID, on va l'appeler par exemple zdt pour dire zone de texte. Voilà, là on va changer la cible. Au lieu de mettre la div orange, on mettra zdt. Et comme événement on va mettre on_keyup, ça veut dire la saisie au clavier. Maintenant avec la console on va afficher le code de la touche qui a été actionnée. On va mettre key_code avec un C majuscule. Maintenant j'exécute. Alors si je mets par exemple ici a, donc ça me retourne 65. On voit bien que c'est le code ASCII de la lettre. Dans ce cas ça fait pas de différence entre un a minuscule ou bien un A majuscule, dans tous les cas ça retourne 65. Si je mets Entrée, ça me retourne 13. Si je mets n'importe quel mot, ça m'affiche respectivement les codes qui correspondent à chacune des touches du clavier qui a généré le mot. On va par exemple faire un test, on va vérifier est-ce qu'on a bien enfoncé la touche Entrée. Alors là, dans le code, on va changer ça légèrement, mettre par exemple if event.keyCode= 13, qui correspond à la touche Entrée, on va afficher dans la console par exemple Entrée. Voilà, comme ça. Donc maintenant on exécute. Alors quand j'écris, il se passe rien, mais une fois que j'appuie sur la touche Entrée, on voit bien que Entrée a été détectée et le message est affiché dans la console. On peut aussi avoir des informations qui concernent la position du curseur de la souris au sein de la page. Alors dans ce cas, on va remettre la cible orange et comme événement on va mettre onMouseMove. Ça veut dire le fait de faire bouger le curseur de la souris. Et ici on va afficher la position de la souris, mais pour ce faire, bon, on va essayer de prévoir 2 zones de texte, par exemple input type text avec ID, on appellera cette zone x et une autre zone juste à côté, et ID y. Bon, chacune va afficher une des coordonnées du curseur de la souris. On mettra donc document.getElementById x.value. Bon, c'est pas innerHTML parce que c'est bien une input, donc value égal, et on mettra event. Dans ce cas, l'abscisse de la souris, c'est clientX. Comme ça. Bon, on mettra la même chose mais maintenant dans le Y. Comme ça, dans la zone Y, on mettra clientY. On exécute pour voir le résultat. Bon, j'ai plus besoin de la console. Alors voilà, donc il suffit de faire bouger le curseur et on voit bien que les valeurs changent. Bon, je vais zoomer un petit peu pour mieux voir ça. Donc là, c'est la position carrément de Donc en fait, c'est l'origine, disons, de la div orange, et ça me retourne la valeur 8, 8. Donc ici, c'est le minimum que je peux atteindre par rapport à cette div, parce que n'oubliez pas que ce système de coordonnées, donc, il a comme origine le point haut à gauche de la partie exploitable du navigateur, c'est-à-dire ce point-là. Imaginez que je veux retourner la position relative à la div, ça veut dire ce point devrait être à 0, 0 et non pas 8, 8. Alors il suffit de soustraire cette marge, donc la marge gauche et la marge supérieure. Et pour faire ça, je mettrai ici moins this, ça veut dire l'objet courant, à savoir la div orange, .offsetLeft. Bon, offsetLeft, c'est la distance qui sépare le bord gauche du navigateur avec l'objet lui-même. Bon, même chose pour l'autre, on va mettre ici moins this.offsetRight. Top, on exécute maintenant pour voir le résultat. Ici, bon, ça me donne bien la position 0, 0, voilà. Donc, et là, c'est la position, bon, presque maximale, c'est à peu près, voilà, donc c'est 519, etc. Bon, parce que n'oubliez pas que la div ne mesure pas vraiment 519. Bon, ce que j'ai spécifié en CSS, c'est 400 pixels, mais n'oubliez pas qu'il y a un padding, bon, ça veut dire il y a 120 pixels qui vont se rajouter, donc ce qui donne à peu près 520 pixels. Et c'est exactement ce que nous avons eu ici. Donc là 519 parce qu'on n'oublie pas qu'on commence à la position 0 et du coup ça fait 520 pixels en largeur. Et c'est la même chose pour la hauteur. Il existe aussi d'autres attributs comme par exemple shiftKey qui permet de vérifier est-ce que la touche Shift a été enfoncée. Bon, ça retourne soit true ou bien false. AltKey qui permet de vérifier si la touche Alt a été activée et CtrlKey Ça veut dire Ctrl+Key qui permet de retourner si la touche Ctrl du clavier a été enfoncée. Sinon, il y a aussi des méthodes qui sont propres à event. Les plus connues sont stopPropagation et preventDefault. stopPropagation permet tout simplement de stopper le flux d'événements parce que, comme on a vu dans la vidéo précédente, les événements se propagent sur le navigateur soit dans un sens descendant, ce que l'on appelle la capture, ou bien dans le sens remontant que l'on appelle le bubbling ou bien le bouillonnement. Et bien sûr, ce flux, on peut l'interrompre à n'importe quel moment à l'aide de la méthode stopPropagation. Par exemple, on va essayer de mettre le même code que la séance dernière. Ici, on mettra addEventListener sur le orange. L'événement, c'est click. Ensuite, on va déclarer une fonction anonyme, function Et la valeur par défaut c'est false pour dire le bouillonnement. Et là on va afficher juste l'ID de l'objet concerné. Dans ce cas on mettra console.log). On exécute déjà pour voir ce résultat. Alors j'affiche la console. Donc quand je clique, bon, ça me donne orange, voilà, dans tous les cas. Bon, maintenant on va prévoir le même code mais pour la div jaune. Ici je vais remplacer ça par jaune. Maintenant j'exécute. Bon, quand je clique sur jaune, ça me donne jaune puis orange. Bon, parce qu'ici c'est le mode bubbling ou bien le mode bouillonnement, c'est-à-dire que les événements sont pris en compte dans le sens remontant. Maintenant il faut savoir que le premier élément qui va capturer l'événement, c'est la div jaune. Au niveau de cette div, je vais mettre stop propagation. Comme ça, bon, je vais afficher juste jaune et non pas orange parce que le flux d'événements sera interrompu à ce niveau. Alors ici, je mettrai event.stopPropagation. Bon, maintenant j'actualise. Bon, normalement on devrait avoir jaune puis orange. Maintenant quand j'actualise et que je clique, ça m'affiche seulement jaune parce que le flux d'événements a été interrompu à l'aide de la méthode stopPropagation. En ce qui concerne preventDefault, c'est une méthode qui permet d'éviter ce qu'on appelle le comportement par défaut. Comme par exemple, si vous avez un bouton type submit, par défaut il va soumettre un formulaire vers une page que vous avez spécifiée dans l'attribut action de la balise form. Bon, si vous mettez un preventDefault sur ce bouton, c'est que cette soumission ne sera plus effectuée parce que ça représente un comportement par défaut qui a été annulé. Bon, j'espère que vous avez compris le principe de l'objet event. Merci pour votre attention et à la vidéo prochaine.
