Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

LA PROPAGATION DES EVENEMENTS EN JAVASCRIPT : BOUILLONNEMENT ET CAPTURE

Présentation du phénomène de propagation des évènements

On va utiliser le terme de « propagation » des évènements pour caractériser l’ordre dans lequel différents évènements vont se déclencher.

Pour bien comprendre le problème, prenons un exemple concret. Imaginons une page web comportant un div et un élément p à l’intérieur de ce div.

Maintenant, nous allons attacher deux gestionnaires d’évènements click à notre div et à notre paragraphe.

Ainsi, lorsqu’un utilisateur va cliquer sur notre paragraphe, les deux évènements vont se déclencher puisque notre paragraphe est contenu dans notre div.

La question est alors la suivante : lorsqu’un utilisateur va cliquer sur le paragraphe contenu dans le div, dans quel ordre vont se déclencher les évènements ? Le click de l'élément p en premier ou celui du div ?

Créons immédiatement cet exemple afin d’observer le résultat.

Introduction à la propagation des évènements en JavaScript

L’évènement de notre paragraphe se déclenche avant celui de notre div

L’évènement click de notre div se déclenche en second

Essayer ce code !

Comme vous pouvez le voir, ici, c’est l’évènement du paragraphe qui se déclenche avant celui du div.

Le sens de propagation des évènements

La première chose que vous devez absolument comprendre est que l’endroit où vous initiez votre évènement n’a aucune influence sur le sens de propagation de celui-ci.

En effet, un évènement va toujours partir de la racine de notre arbre DOM, c’est-à-dire de notre élément html, vers l’élément le plus profond comportant un gestionnaire de cet évènement.

Cette « descente » le long de l’arbre DOM est appelée phase de « capture ».

Ensuite, une fois l’élément atteint, notez bien que l’évènement ne va pas s’arrêter mais va faire le chemin inverse et remonter le long de l’arbre jusqu’à l’élément html.

Cette deuxième phase de « remontée » est appelée la phase de « bouillonnement ».

Gérer l’ordre de déclenchement des évènements

Dans l’exemple précédent, nous avons pu observer que le gestionnaire d’évènement lié à notre paragraphe était activé avant celui lié à notre div.

Ainsi, nous pouvons en déduire que les évènements vont se déclencher par défaut durant la phase de remontée, c’est à dire durant la phase de bouillonnement.

Cependant, nous allons pouvoir choisir durant quelle phase les évènements doivent se déclencher et ainsi pouvoir gérer l’ordre de déclenchement de ces évènements grâce à un troisième paramètre optionnel de addEventListner().

Ce paramètre prend la forme d’un booléen (true ou false). Si l’on indique la valeur false (valeur par défaut), on choisit de ne déclencher l’évènement que lors de la phase de bouillonnement.

Si en revanche on choisit la valeur true, on choisit de déclencher l’évènement lors de la phase de capture.

Rappelez vous bien à nouveau qu’un évènement part toujours de l’élément racine de notre arbre DOM et descend le long de celui-ci.

Ainsi, les évènements répondant à la phase de capture seront toujours déclenchés avant ceux répondant à la phase de bouillonnement

Voyons un exemple ensemble afin d’être sûr de bien maitriser tout cela.

Différence entre les phases de capture et de bouillonnement

Essayer ce code !

Ci-dessus, nous avons crée deux div appartenant à deux branches différentes de notre arbre DOM (aucun des deux n’est l’enfant ni le parent de l’autre, ce sont deux éléments frères) afin de pouvoir tester les deux phases séparément.

Notre premier div et premier élément p utilisent la phase de bouillonnement. Cela signifie que les évènements qui leur sont liés ne se déclencherons que durant la phase de bouillonnement, c’est-à-dire la remontée dans l’arbre.

Ainsi, l’évènement lié à notre paragraphe se déclenchera avant celui lié à notre div.

Concernant notre div2 et notre paragraphe p2, nous utilisons cette fois ci la phase de capture. Cela signifie que les évènements liés à ces éléments seront déclenchés lors de la première descente dans l’arbre de l’élément.

Ainsi, l’évènement lié à notre div va se déclencher avant celui lié à notre paragraphe.

Si vous avez bien compris cela, vous n’aurez aucun mal à manipuler l’ordre de déclenchement des évènements.

Prenons un deuxième exemple mêlant l’utilisation des phases de bouillonnement et de capture.

Mélange des phases de bouillonnement et de capture en JavaScript

Essayer ce code !

Ci-dessus, nous avons attaché un évènement click à nos quatre éléments body, div1, p1 et strong.

Nous demandons aux évènements liés à p1 et strong de réagir durant la phase de capture, et à ceux liés à body et à div1 de réagir durant la phase de bouillonnement.

Si vous avez bien suivi jusqu’ici, vous ne devriez avoir aucun mal à comprendre l’ordre des évènements.

Ici, l’évènement click part, comme toujours, de l’élément html et descends jusqu’à l’élément portant l’évènement click sur lequel nous avons cliqué.

Ainsi, si l’on clique sur strong, l’évènement va aller de html à strong et tous les évènements réagissant à la phase de capture sur son passage vont être déclenchés dans l’ordre.

Le premier évènement déclenché va donc être celui relatif à notre élément p, puis celui relatif à notre élément strong.

Ensuite, l’évènement va poursuivre sa route et remonter le long de l’arbre DOM. Lors de ce deuxième passage, les gestionnaires d’évènements réagissant à la phase de bouillonnement vont se déclencher dans l’ordre de la remontée, c’est-à-dire celui du div d’abord puis celui du body.

Chapitre précédent

Chapitre suivant