In this French-language YouTube short, the presenter demonstrates a limitation of assigning an onclick handler directly to a DOM element: when the same handler is assigned twice, the second assignment overwrites the first, so only the last message ("Bonsoir") would appear. To overcome this, he introduces the addEventListener method, explaining that it accepts three arguments—the event type as a string (without the "on" prefix), a callback function (preferably anonymous), and an optional boolean flag (default false) that controls event capturing. He then shows a simple example where addEventListener is used on a div (identified by the class "orange") to display an alert("Bonjour") when the element is clicked, confirming that the handler works as intended.
Chapters
Supposons maintenant que je vais déclarer le même gestionnaire d'événements sur le même objet mais avec un traitement différent. Autrement dit, je vais copier ce bout de code et je vais le coller juste après et je vais changer de message. Au lieu de bonjour, je vais mettre bonsoir. Donc vous avez constaté que l'objet c'est lui-même et l'événement c'est lui-même, mais j'ai déclaré ça 2 fois de suite. Alors quand j'exécute, on va voir que seulement le dernier gestionnaire d'événements est pris en considération, à savoir celui qui va afficher le message de soir. Autrement dit, c'est comme si cet événement n'a pas été détecté sur l'objet. Et ça, ça constitue un inconvénient de cette méthode. Ceci va nous conduire à la méthode suivante. Alors, je vais considérer que l'objet concerné par l'événement, c'est toujours le même, c'est-à-dire la div identifiée par orange. Mais cette fois-ci, au lieu de mettre directement l'événement onclick, je vais faire appel à la méthode addEventListener. EventListener. La méthode addEventListener permet tout simplement d'instaurer un gestionnaire d'événements sur l'objet courant, à savoir dans ce cas la balise identifiée par orange. Cette méthode accepte 3 arguments. Le premier argument est la nature de l'événement lui-même en tant que chaîne de caractères. Dans ce cas, l'événement c'est clic. Notez bien qu'il faut pas mettre le on dans ce cas. Deuxième paramètre, c'est la fonction à exécuter. Il est préférable que ce soit une fonction anonyme de la même manière que la méthode précédente. Donc function et on met des accolades pour spécifier le corps de la fonction et le troisième argument qui est un booléen qui est par défaut false. Ensuite je vais revenir sur cet argument pour comprendre à quoi ça sert. Bon maintenant ici il suffit de déclarer le code que je souhaite. Par exemple je vais mettre quelque chose du genre alerte Bonjour comme tout à l'heure. Maintenant on exécute pour voir le résultat. Je clique et j'ai toujours Bonjour qui s'affiche.
