Explication détaillée du bouillonnement d'événements Javascript et des méthodes de capture et de blocage des compétences_javascript

1. La séquence des événements

L'origine de ce problème est très simple, supposons que vous ayez un élément imbriqué dans un autre élément

Copier le code Code comme suit :

----------------------------------
| element1                                                                                  | ------------------ |

------------------------ - ----------

 : Et les deux ont un gestionnaire d'événements onClick. Si l'utilisateur clique sur l'élément 2, les événements de clic de l'élément 1 et de l'élément 2 seront déclenchés. Mais quel événement est déclenché en premier ? Quelle fonction de gestionnaire d’événements sera exécutée en premier ? En d’autres termes, quelle a été la séquence exacte des événements ?

2. Deux modèles

Comme prévu, Netscape et Microsoft avaient deux approches très différentes pour gérer cette époque de « guerre des navigateurs » :

Netscape préconise que l'événement de l'élément 1 se produise en premier. Cet ordre d'occurrence de l'événement est appelé le type de capture

Microsoft maintient que l'élément 2 est prioritaire. d'entre eux La séquence des événements est diamétralement opposée. Le navigateur Explorer ne prend en charge que les événements bouillonnants, Mozilla, Opera7 et Konqueror prennent en charge les deux. L'ancien Opera et iCab ne prennent pas en charge non plus

3. Capturer les événements

Lorsque vous utilisez la capture d'événements

Copiez le code

Le code est le suivant : ---------------| |-----------------

| élément1 |

| --- --------| |----------- |
| |élément2 / |
| ------------- -- ---------- |
| CAPTURE D'ÉVÉNEMENT |
------------------------------ - -----

 : Le gestionnaire d'événements de l'élément 1 est déclenché en premier, et le gestionnaire d'événements de l'élément 2 est déclenché en dernier

4. Événements bouillonnants

Lorsque vous utilisez des événements bouillonnants

Copiez le code

Le code est le suivant : ---------------| |-----------------

| élément1 |

| - ---------- |----------- |
|élément2 |
| ---------- -- ----------- |
| Événement BOUILLANT |
------------------------------ -- -------

: La fonction de traitement de l'élément 2 est déclenchée en premier, suivi de l'élément 1

5. Modèle W3C

Le W3c a judicieusement choisi la bonne solution dans cette bataille. Tout événement qui se produit dans le modèle d'événement w3c entre d'abord dans la phase de capture jusqu'à ce qu'il atteigne l'élément cible, puis entre dans la phase de bouillonnement

Copier le code

Le code est le suivant :

                                                        --
| -| |
|élément2 / |
|
|Modèle d'événement W3C |
--------------------------------------- ------

En tant que développeur Web, vous pouvez choisir de lier la fonction de traitement des événements dans la phase de capture ou dans la phase de bouillonnement. Ceci est réalisé via la méthode addEventListener() si le dernier paramètre. de cette fonction est vraie, alors dans la phase de capture La fonction de liaison de phase, sinon fausse, lie la fonction dans la phase de bouillonnement.

Supposons que vous vouliez faire

Copier le code Le code est le suivant :

élément1 .addEventListener('cliquez',doSomething2,true)

element2.addEventListener('click',doSomething,false)

Si l'utilisateur clique sur l'élément 2, que se passe-t-il ensuite :

(L'événement est ici comme un touriste, voyageant de l'extérieur vers l'intérieur, s'approchant progressivement de l'élément principal qui s'est déclenché, puis repartant dans la direction opposée)

1. L'événement clic entre d'abord dans la phase de capture (en se rapprochant progressivement de la direction de l'élément 2). Vérifiez si l'un des éléments ancêtres de l'élément 2 a un gestionnaire onclick dans la phase de capture

2. On constate que l'élément 1 en a un, donc doSomething2 est exécuté

3. L'événement vérifie la cible elle-même (élément 2 ), mais il n'y a pas de gestionnaire onclick dans la phase de capture. Trouvé plus de fonctions de traitement. L'événement commence à entrer dans la phase de bouillonnement et doSomething() est exécuté naturellement, qui est une fonction liée à la phase de bouillonnement de l'élément 2.
4. L'événement s'éloigne de l'élément 2 pour voir si un élément ancêtre est lié à un gestionnaire pendant la phase de bouillonnement. Il n'y a pas de tel cas, donc rien ne se passe
Le cas inverse est :

Copiez le codeLe code est le suivant :

element1.addEventListener('click',doSomething2,false)

element2.addEventListener('click',doSomething,false)

Maintenant, si l'utilisateur clique sur l'élément 2, cela se produira :

1. Cliquez sur l'événement pour entrer dans la phase de capture. Vérifiez si l'un des éléments ancêtres de l'élément 2 a un gestionnaire onclick dans la phase de capture. Le résultat n'est rien 2. L'événement détecte lui-même la cible. L'événement commence à entrer dans la phase de bouillonnement, et la fonction liée à la phase de bouillonnement de l'élément 2 est exécutée. doSomething()

3. L'événement commence à s'éloigner de la cible. Vérifiez si l'un des éléments ancêtres de l'élément 2 est lié à une fonction de gestionnaire pendant la phase de bouillonnement. 4. Une est trouvée, donc doSomething2(). de l'élément 1 est exécuté


6. Compatibilité et mode traditionnel

Dans les navigateurs prenant en charge w3c dom (Document Object Model), la méthode traditionnelle de liaison d'événements est

Copier le code Le code est comme suit : element1.onclick = doSomething2;

est considéré comme lié à l'étape de bouillonnement par défaut

7. Utiliser les événements bouillonnants

Peu de développeurs utiliseront consciemment des événements bouillonnants ou des événements de capture. Dans les pages Web qu'ils réalisent aujourd'hui, il n'est pas nécessaire qu'un événement soit géré par plusieurs fonctions car il bouillonne. Mais parfois, les utilisateurs sont souvent confus car après avoir cliqué sur la souris une seule fois, de nombreuses choses se produisent (plusieurs fonctions sont exécutées à cause du bouillonnement). Dans la plupart des cas, vous souhaitez que vos fonctions de traitement soient indépendantes les unes des autres. Lorsque l'utilisateur clique sur un élément, ce qui se passe, et ce qui se passe lorsque l'utilisateur clique sur un autre élément, sont indépendants l'un de l'autre et ne sont pas liés par bouillonnement.

8. Ça arrive tout le temps

La première chose que vous devez comprendre est que la capture ou le bouillonnement d'un événement se produit toujours. Si vous définissez une fonction générale de traitement onclick pour l'ensemble de la page du document

Copiez le code Le code est le suivant : document.onclick = doSomething;

if (document.captureEvents) document.captureEvents(Event.CLICK);

L'événement de clic consistant à cliquer sur n'importe quel élément de la page finira par remonter jusqu'à la couche de document la plus élevée de la page, déclenchant ainsi la fonction de traitement général, à moins que la fonction de traitement précédente n'indique explicitement de mettre fin au bouillonnement, ce n'est qu'à ce moment-là que le processus sera activé. le bouillonnement sera arrêté. Ne sera pas propagé à l'ensemble du niveau du document

Ajout à la deuxième phrase du code ci-dessus :

>>>Parlons d'abord d'IE
object.setCapture() Lorsqu'un objet est setCapture, sa méthode sera héritée de l'ensemble du document pour la capture.
Lorsque vous n'avez pas besoin d'hériter de la méthode pour capturer l'intégralité du document, utilisez object.releaseCapture()
>>>others
Mozilla a également une fonction similaire, la méthode est légèrement différente
window.captureEvents (Event.eventType)
window.releaseEvents(Event.eventType)
>>>exemple

Copier le code Le code est le suivant :

//S'il n'y a que la phrase suivante, alors le clic ne sera déclenché que lorsque l'on clique sur obj obj.onclick = function(){alert(" quelque chose")}
//Si vous ajoutez la phrase suivante, la méthode sera héritée du document (ou de la fenêtre, les différents navigateurs sont différents) pour capturer
obj.captureEvents(Event.click); //FF
obj.setCapture() // IE

9. Utilisation

Étant donné que toute propagation d'événement se termine dans le document de page (ce niveau supérieur), cela rend possible le gestionnaire d'événements par défaut, en supposant que vous ayez une page comme celle-ci

Copier le code Le code est le suivant :

-------------------------- ---- --------
| document                                                           | ----- |

----- --------------------------------- -
element1.onclick = doSomething;
element2.onclick = doSomething;
document.onclick = defaultFunction;

Maintenant, si l'utilisateur clique sur l'élément 1 ou l'élément 2, doSomething() sera exécuté. Si vous le souhaitez, vous pouvez empêcher les événements de remonter ici si vous ne voulez pas qu'ils remontent vers defaultFunction(). Mais si l'utilisateur clique ailleurs sur la page, defaultFunction() sera toujours exécuté. Cet effet peut parfois être utile.
Page Paramètres - permet à la fonction de traitement d'avoir une zone de déclenchement plus grande, ce qui est nécessaire dans le script "effet glisser". De manière générale, l'apparition d'un événement mousedown sur une couche d'élément signifie que l'élément est sélectionné et activé pour répondre à l'événement mousemove. Bien que mousedown soit généralement lié à cette couche d'éléments pour éviter les bugs du navigateur, la portée des fonctions d'événement des deux autres doit être la page entière (?)

Rappelez-vous la première loi de la navigateurlogie : tout peut arriver, et c'est à ce moment-là que vous êtes au moins quelque peu préparé. Donc ce qui peut arriver c'est que lorsque l'utilisateur glisse, il déplace fortement sa souris sur la page, mais le script ne peut pas répondre à la grande amplitude, de sorte que la souris ne reste plus sur le calque de l'élément

1. Si la fonction de gestionnaire onmouseover est liée au calque d'élément, ce calque d'élément ne répondra plus au mouvement de la souris, ce qui rendra les utilisateurs étranges.

2 Si la fonction de gestionnaire onmouseup est liée au calque d'élément. L'événement ne peut pas être déclenché. La conséquence est qu'une fois que l'utilisateur souhaite supprimer ce calque d'éléments, le calque d'éléments continue de répondre au mouvement de la souris. Cela provoquera plus de confusion (?)

Donc, dans cet exemple, le bouillonnement d'événements est très utile, car placer vos fonctions de gestionnaire au niveau de la page garantit qu'elles peuvent toujours être exécutées

10. Éteignez-le (pour éviter que les événements ne bouillonnent)

Mais en général, vous souhaiterez désactiver toutes les bulles et toutes les captures pour vous assurer que les fonctions ne se perturbent pas. De plus, si la structure de votre document est assez complexe (de nombreux tableaux imbriqués les uns dans les autres, etc.), vous souhaiterez peut-être désactiver le bullage pour économiser les ressources système. À ce stade, le navigateur doit vérifier chaque ancêtre de l'élément cible pour voir s'il possède une fonction de gestionnaire. Même si personne n'est trouvé, la recherche prend encore beaucoup de temps

Dans le modèle Microsoft, vous devez définir la propriété CancelBubble de l'événement sur true

Copiez le code Le code est le suivant suit :window.event.cancelBubble = true
Dans le modèle w3c vous devez appeler la méthode stopPropagation() de l'événement

Copiez le code Le code est le suivant :

e.stopPropagation()

Cela empêchera toutes les bulles de se propager vers l'extérieur. En tant que solution multi-navigateurs, cela doit être fait :

Copiez le code Le code est le suivant :

fonction faireQuelquechose(e)

{
　 if (!e) var e = window.event;

e.cancelBubble = true;

if (e.stopPropagation) e.stopPropagation();

}

Il n'y a aucun mal à définir CancelBubble dans les navigateurs prenant en charge l'attribut CancelBubble. Le navigateur haussera les épaules et créera cet attribut. Bien sûr, cela n'annule pas vraiment le bouillonnement, mais cela garantit au moins que cette commande est sûre et correcte

11. cible actuelle

Comme nous l'avons vu précédemment, un événement utilise l'attribut target ou srcElement pour indiquer sur quel élément cible l'événement s'est produit (c'est-à-dire l'élément sur lequel l'utilisateur a initialement cliqué). Dans notre cas c'est l'élément 2 car nous avons cliqué dessus.

Il est très important de comprendre que l'élément cible lors de la phase de capture ou de bullage ne change pas, il est toujours associé à l'élément 2.

Mais supposons que nous lions la fonction suivante

Copier le code Le code est le suivant :

element1. onclick = faire quelque chose;

element2.onclick = doSomething;

Si l'utilisateur clique sur l'élément 2, doSomething() sera exécuté deux fois. Mais comment savoir quel élément html répond à cet événement ? target/srcElement ne donne également aucune idée, mais les gens préféreront toujours l'élément 2 car c'est la cause de l'événement (car c'est ce sur quoi l'utilisateur a cliqué).
Pour résoudre ce problème, w3c a ajouté l'attribut currentTarget, qui pointe vers l'élément qui gère l'événement : c'est exactement ce dont nous avons besoin. Malheureusement, il n'existe pas d'attribut similaire dans les modèles Microsoft
Vous pouvez également utiliser le mot-clé "this". Dans l'exemple ci-dessus, il équivaut à l'élément HTML qui gère l'événement, comme currentTarget.

12. Problèmes avec le modèle Microsoft

Mais lorsque vous utilisez le modèle de liaison d'événements Microsoft, le mot-clé this n'est pas équivalent à l'élément HTML. Lenovo ne dispose pas d'un modèle Microsoft similaire à la propriété currentTarget (?) - si vous suivez le code ci-dessus, vous signifierez :

Copier le code Le code est le suivant :

element1.attachEvent('onclick',doSomething)

element2.attachEvent('onclick',doSomething)

Vous ne pouvez pas savoir exactement quel élément HTML est responsable de la gestion de l'événement. C'est le problème le plus grave avec le modèle de liaison d'événement de Microsoft. c'est aussi la raison pour laquelle je ne l'utilise jamais, même lors du développement d'applications uniquement pour IE sous Windows

J'espère pouvoir bientôt ajouter des propriétés de type currentTarget - ou suivre la norme ? Les développeurs Web ont besoin de ces informations

Post-scriptum :

Comme je n'ai jamais utilisé JavaScript en pratique, il y a certaines parties de cet article que je ne comprends pas très bien, je ne peux donc les traduire que brusquement, comme la section sur l'effet glisser si vous avez des ajouts ou. questions, vous pouvez me laisser un message. Merci pour votre soutien !