Comprendre le Traitement d'Événements en JavaScript avec le DOM

Traiter les évènement avec JavaScript
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Javascript
Revoir le teaser Je m'abonne
4,5
Transcription

49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
4,5
49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont d'enseigner :
1. Comment écouter et gérer les événements JavaScript.
2. Les méthodes preventDefault et stopPropagation.
3. Utiliser les propriétés de l'objet Event pour un contrôle accru.

Découvrez comment gérer les événements dans le DOM avec JavaScript pour rendre vos sites web dynamiques.

Le Document Object Model (DOM) permet de traiter une multitude d'événements, avec des exemples pratiques comme l'événement OnClick. Cette leçon vous guidera à travers les différentes étapes nécessaires pour écouter et manipuler des événements via des Event Handlers. Vous apprendrez à annuler des actions par défaut et à contrôler la propagation des événements dans la hiérarchie du DOM. Des concepts essentiels comme preventDefault et stopPropagation seront expliqués en détail. Vous verrez également comment utiliser les propriétés clés de l'objet Event, telles que type, target et currentTarget, pour obtenir des informations précises sur l'événement en cours de traitement. De plus, des exercices pratiques et des astuces pour déboguer vos scripts JavaScript seront présentés. À la fin de la leçon, vous disposerez des compétences nécessaires pour améliorer l'interactivité de vos pages web en utilisant le DOM.

Voir plus
Questions réponses
Qu'est-ce qu'un Event Handler en JavaScript ?
Un Event Handler est une fonction qui est exécutée lorsque l'événement auquel il est attaché est déclenché. En JavaScript, il prend généralement un objet Event en paramètre pour manipuler les caractéristiques de l'événement.
Comment peut-on empêcher la propagation d'un événement dans le DOM ?
Pour empêcher la propagation d'un événement, vous pouvez utiliser la méthode stopPropagation() de l'objet Event dans votre Event Handler.
À quoi sert la méthode preventDefault ?
La méthode preventDefault() est utilisée pour annuler l'action par défaut associée à un événement. Par exemple, elle peut empêcher un lien de navigation de charger une nouvelle page.
Le DOM fournit la possibilité de traiter des événements. Ici, vous avez un exemple de traitement pour l'événement OnClick, mais il existe de nombreux autres événements. Je vous indiquerai à la fin de cette vidéo où trouver une liste complète de ces événements. Comment traite-t-on un événement ? D'abord, on indique l'élément sur lequel on veut écouter l'événement. Ensuite, on utilise une propriété de cet élément qui correspond à l'événement, comme son nom indique, ici, pour OnClick. On préfixe l'événement par On, le nom de l'événement, OnClick, et on lui assigne une valeur. Cette valeur, c'est une fonction qui va traiter l'événement. Cette fonction reçoit en argument un objet Event. Cet objet Event possède des propriétés et des méthodes que nous pourrons utiliser, nous le verrons. On appelle ce type de fonction des Event Handlers. Les événements ont des caractéristiques remarquables. Ils peuvent être annulés, c'est-à-dire qu'un Handler peut annuler l'action par défaut. Dans l'exemple d'un lien, d'un clic sur un lien, le Handler peut annuler l'action par défaut du navigateur, qui est de charger l'URL pointée par le lien. Autre caractéristique remarquable, les événements se propagent en remontant la hiérarchie du DOM. Qu'est-ce que ça veut dire ? Imaginons une DIV. Cette DIV est contenue dans un Body. Si je clique sur la DIV, l'événement va être traité par le Handler de la DIV, s'il existe, puis se propager sur le Handler du Body, si celui-ci a été programmé. Autre caractéristique, cette propagation peut être annulée par un des Handlers en remontant la hiérarchie du DOM. Parmi les méthodes de l'objet événement très fréquemment utilisée par les Handlers, il y a prévent défaut. Prévent défaut pourra être utilisé pour annuler l'action par défaut, qui est de charger la page pointée par l'URL. Autre méthode de l'objet événement fréquemment utilisée, c'est StopPropagation. StopPropagation permet d'annuler la propagation de l'événement en remontant la hiérarchie du DOM. Reprenons notre exemple de tout à l'heure. Supposons qu'on ait programmé un Handler sur une DIV, que cette DIV soit contenue dans un Body, où un autre Handler a été programmé. Si je clique sur la DIV, son Handler pourra annuler la propagation de l'événement sur le Body. Parmi les propriétés de l'objet Event très fréquemment utilisé par les Handlers, il y a le type. Le type renvoie le nom de l'événement. Par exemple, concernant l'événement Click, la propriété type renverra la chaîne de caractère Click. La propriété Target renverra l'élément sur lequel a eu lieu l'événement. Si je clique sur un lien, le Target sera l'élément correspondant à ce lien. La propriété CurrentTarget renverra l'élément sur lequel a été programmé le Handler. Tout ceci peut paraître un peu abstrait à comprendre, mais nous verrons dans la console que tout cela est plus simple qu'il n'y paraît. Dans mon navigateur, j'ai chargé ma page test5.html puis j'ai ouvert une console javascript. Je me propose de créer une écoute d'événements sur le Body à l'aide d'un Event Handler. document.body .onclick Là je mets mon Handler fonction, il prend comme argument un objet Event que je nomme du même nom. Et dans mon bloc d'instructions, je vais afficher différentes informations. D'abord le type de l'événement, l'Event Target, l'élément sur lequel a lieu l'événement, je vais mettre son tag name, puis le Current Target, le Current Target, c'est à dire l'élément pour lequel j'ai programmé mon Handler et ce sera ici Body. Je ferme mon bloc d'instructions, je mets un point virgule ici, un autre là, voilà. Si je clique quelque part par ici, j'ai bien mon message, il me dit que j'ai eu un clic sur une div traitée par Body. Pourquoi sur une div ? On va voir, on va vérifier. Je fais un clic droit par ici, je vais utiliser ce menu pour savoir où j'ai cliqué. Effectivement j'ai bien cliqué sur une div. L'événement s'est propagé jusqu'au Handler du Body. Je retourne à la console. Maintenant je vais programmer une écoute, une écoute de l'événement clic sur ce premier lien. Pour le retrouver, il va falloir que je récupère l'objet parent, l'objet d'Idnav. Je vais le retrouver grâce à la méthode GetElementById, et je cherche l'Idnav, je l'ai bien ici. Maintenant dans MyNav, je vais récupérer mon premier lien, je vais l'appeler MyLink, égal MyNav, là je vais utiliser sa méthode GetElementByTagName, et je cherche les liens A, et comme c'est le premier lien, je vais spécifier l'index 0, voilà, je vérifie, c'est bien mon premier lien. Je vais pouvoir programmer mon Handler, mon écoute. J'écoute l'événement clic, je vais faire plus simple, je vais recopier ceci, en même tout ceci, je termine par un point virgule, c'est bon. Là, tout de même, il va me manquer quelque chose, je vais éviter l'action par défaut, donc je rajoute, après l'alerte, je vais rajouter Event, Prevent, Default. Si je ne fais pas ça, le navigateur va vouloir suivre le lien. Voilà, que se passe-t-il si je clique sur ce lien ? J'ai bien clic sur le lien A, traité par le Handler du A. Maintenant j'ai un deuxième message, c'est le Handler du Body, clic sur A, c'est là où j'ai cliqué initialement, mais traité par le Handler du Body. Si je veux éviter cette propagation, il suffit que je rajoute ici quelque chose comme Event.StopPropagation. Voyons si ça marche. J'ai mon premier message, effectivement j'ai annulé la propagation. Vous l'avez sans doute deviné, le traitement d'événements est un élément crucial pour rendre un site web dynamique. Je vous avais promis une liste d'événements, vous pouvez utiliser 3WSchools, ils proposent une liste assez exhaustive des événements et même des méthodes disponibles. Ici ils vous indiquent les compatibilités et enfin différentes informations intéressantes.

Programme détaillé de la formation

4 commentaires
4,5
4 votes
5
4
3
2
1
nicolas.braud
Il y a 1 year
Commentaire
Très bonne formation ; j'ai eu des difficultés avec la partie AJAX pour installer les hôtes virtuels d'un point de vue technique, mais on peut y arriver quand même à l'aide de tuto. les documents présentés en slide seraient appréciés pour les utiliser a posteriorir.
fguibert47
Il y a 2 years
Commentaire
Bonjour, Excellente formation. Très bien faite. Alain Beauvois est un très bon professeur !! Elle correspond tout à fait à ce que j'attendais. Merci.
amercadie
Il y a 2 years
Commentaire
Excellente formation. Des cours progressifs et très clairs.
david.coilot
Il y a 2 years
Commentaire
très bonne formation !!
Nos dernières formations JavaScript
  • Apprendre Vue JS 3
    Découvrir
    Apprenez à créer des applications web modernes avec notre formation "Apprendre Vue JS 3". Rejoignez-nous et maîtrisez ce puissant framework JavaScript ! 🚀 #VueJS #FormationWeb #Développement
    11h47 91 leçons
  • Apprendre JavaScript ES6 - Les fondamentaux
    Découvrir
    Apprendre les fondamentaux du langage de programmation JavaScript
    4h22 41 leçons 3,50 / 5
  • Savoir programmer en Node.js
    Découvrir
    Apprendre à programmer en Node.js
    2h14 15 leçons