Il va de soit que body contient les balises. Supposons que Body contienne un p. Si vous cliquer à l'endroit où se trouve le paragraphe, vous avez cliqué sur le body et sur le paragraphe ?
Mais dans quel ordre !
"Qui de la poule ou de l’œuf était avant ?"
 |
| un p dans un body : sens de propagation des événement |
La réponse est la suivante : c'est vous qui choisissez.
Examinons le cas, où l'on considère que vous avez cliqué d'abord sur le Body puis sur le paragraphe ; autrement dit il y a propagation de l'événement par le bas (voir figure précédente)
Cas Body->paragraphe
Remarquez le troisième paramètre de EventListener à true.
addEventListener(event, callback , true);
Utiliser le débogueur pour observer les priorités en mettant deux points d'arrêts (lig. 30, 37) et relancer le débogueur.
Lancer l'exécution et cliquer sur le paragraphe
Avancer le débogueur : on voit que body a réagi.
Cas paragraphe->body
Remarquez le troisième paramètre à false.
addEventListener(event, callback , False);
Comme précédemment, mettre deux points d'arrêts et lancer l'exécution puis cliquer sur le paragraphe
Avancer le débogueur : c'est maintenant le paragraphe qui réagi en premier.
Comparaison : le troisième paragraphe permet de contrôle le sens de propagation.
Le style est d'abord appliqué au body (1 cas)
Le style est d'abord appliqué au paragraphe (2 cas)
Stop propagation
On peut empêcher la propagation de l'événement.