Passage de paramêtres Event
Prenons l'exemple de mozilla pour illustrer le passage de paramètre à un événement
JS Bin on jsbin.com
JS Bin on jsbin.com
JS Bin on jsbin.com
Cette solution n'est pas applicables dans le cas de boucles !
Les closures sont très utiles pour le passages de paramètre lors d'un événement
JS Bin on jsbin.com
JS Bin on jsbin.com
JS Bin on jsbin.com
JS Bin on jsbin.com
Cette solution n'est pas applicables dans le cas de boucles !
Les closures sont très utiles pour le passages de paramètre lors d'un événement
JS Bin on jsbin.com
Evénements la propagation
Nous allons utiliser le débogeur pour mieux comprendre la propagation des événements dans le DOM.
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 !
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)
Remarquez le troisième paramètre de EventListener à 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.
Avancer le débogueur : on voit que le paragraphe à réagi.
Remarquez le troisième paramètre à 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.
Avancer le débogueur : c'est au tour du body.
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.
Simuler des fonctions de base
Soit le code HTML suivant
Cliquez sur le code précédant pour accéder au fichier test.
Tapez le code suivant dans la console.
Nous détectons la présence du retour chariot. Le test du type confirme notre hypothèse
Voici l'écriture d'une fonction permettant d'obtenir le premier élément (avec ou sans retour chariot).
function next( elem ) {
do {elem = elem.nextSibling;} while ( elem && elem.nodeType != 1 );return elem;
}
function first( elem ) {
elem = elem.firstChild;
return elem && elem.nodeType != 1 ?
next ( elem ) : elem;
}
first(document.body);
Para 1
second Para 2
dernier Para
Inscription à :
Articles (Atom)