Short video: Objet event de Javascript

2 Jan 2023 · 2 min

Watch on YouTube

2:00

In this French-language short tutorial, the speaker explains the JavaScript Event object, which is automatically created when an event occurs. He demonstrates how to attach an onclick handler to a div with the id "orange" and shows how to inspect the event object inside the handler. By logging `event.type`, he confirms the event is a click. He then explains `event.target`, which returns the deepest element under the mouse cursor at the moment of the event, not necessarily the element that registered the handler. Using a demo with an orange div (the one with the handler) and a yellow div (without a handler), he shows that clicking the orange div returns the orange element, while clicking the yellow div returns the yellow element even though the handler is attached to the orange div. The video emphasizes the practical difference between the element that receives the event listener and the element reported by `event.target`.

Chapters

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, 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 qu'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 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. 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 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.