Le bouillonnement d'événements JavaScript, c'est moi · Exemples d'images et de textes

1. Événements

Dans la plate-forme d'application client du navigateur, fondamentalement, tout est piloté par des événements, c'est-à-dire qu'un événement se produit, puis les actions correspondantes sont prises.

Les événements du navigateur représentent des signaux indiquant que quelque chose s'est produit. L'élaboration des événements n'est pas l'objet de cet article. Les amis qui ne l'ont pas encore compris peuvent consulter le tutoriel de W3school pour en savoir plus. Cela permettra de mieux comprendre le contenu suivant.

2. Mécanisme à bulles

Qu'est-ce que le bouillonnement ?

Vous devez comprendre l'image ci-dessous. Les bulles partent du fond de l'eau et montent, du profond au peu profond, jusqu'au sommet. En montant, les bulles traversent différents niveaux d’eau.

En conséquence : cette bulle est équivalente à notre événement ici, et l'eau est équivalente à l'ensemble de notre arbre dom ; les événements montent de la couche inférieure de l'arbre dom Passé jusqu'à ce que il est transmis au nœud racine du dom.

Analyse de cas simple

Ce qui suit est un exemple simple pour illustrer le principe du bullage :

Définir un code HTML avec trois doms simples dedans. : div1, div2, span, div2 contient span, div1 contient div2 et ils sont tous sous le corps :

? 1 1 2 3 4 5 6 7 "body" > "box1" class= "box1" > "box2" class= "box2" > "span" >This is a span. 23 4 5 6 7 "body" > "box1" class= "box1" > "box2" class= "box2" > "span" >Ceci est un span. Le prototype de l'interface est le suivant :

a. Ajoutez la surveillance des événements de clic au corps. Lorsque le corps capture l'événement, imprimez l'heure à laquelle l'événement s'est produit. s'est produit et les informations sur le nœud qui ont déclenché l'événement :

?

1 2 3 4 5 6 1 2 3 4 5 6 7 8 "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventHandler); } function eventHandler(event) { console.log( "时间：" + new Date(event.timeStamp)+ " 产生事件的节点：" + event.target.id + " 当前节点：" +event.currentTarget.id); } 7 8 "text/javascript" > code> window.onload = code> fonction () { document.getElementById( "body" ).addEventListener( "click" , eventHandler); } fonction eventHandler(event) { console.log( "Time:" + nouveau Date(event.timeStamp)+ " Le nœud qui génère l'événement : " + event target.id + " Nœud actuel : " +event.currentTarget.id); } Lorsque nous cliquons sur "This is span", div2, div1 et body dans l'ordre, les informations suivantes sont affichées :

Analyse de ce qui précède Le résultat :

Peu importe qu'il s'agisse du corps, du sous-élément div1 du corps, du sous-élément div2 du div ou du span, lorsque l'on clique sur ces éléments, un événement de clic sera généré et le body le capturera, puis appellera la fonction de gestionnaire d'événements correspondante. Tout comme les bulles dans l’eau montent de bas en haut, les événements aussi.

Le schéma de livraison de l'événement est le suivant :

L'heure de l'occurrence + le lieu de l'événement + le type de l'événement + le gestionnaire actuel de l'événement + d'autres informations,

1 2

3

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 "text/css" > .box1 { border: green 40px solid; width: 300px; height: 300px; margin: auto; } .box2 { border: yellow 40px solid; width: 220px; height: 220px; margin: auto; } span { position: relative; left: 50px; top: 50px; } "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventHandler); } function eventHandler(event) { console.log( "时间：" + new Date(event.timeStamp)+ " 产生事件的节点：" + event.target.id + " 当前节点：" +event.currentTarget.id); } "body" > "box1" class= "box1" > "box2" class= "box2" > "span" >This is a span. b. Terminer le bouillonnement de l'événement

Nous souhaitons maintenant implémenter une telle fonction Lorsque l'on clique sur div1, un "Bonjour", je suis. le div le plus externe.", lorsque vous cliquez sur div2, "Bonjour, je suis le div de la deuxième couche" apparaît ; lorsque vous cliquez sur span, "Bonjour, je suis span" apparaît.

De là, nous aurons le fragment javascript suivant :

? 1 1 2 3 4 5 6 7 8 9 10 11 12 13 "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( "您好，我是最外层div。" ); }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ alert( "您好，我是第二层div。" ); }); document.getElementById( "span" ).addEventListener( "click" , function (event){ alert( "您好，我是span。" ); }); } 2 3 4 5 6 7 8 9 10 11 12 13 "text/javascript" > window.onload = fonction () { document .getElementById( "box1" ).addEventListener( " cliquez sur" , fonction (événement){ alerte( "Bonjour, je suis le div le plus à l'extérieur. " ); }); document .getElementById( "box2" ).addEventListener( " cliquez sur" , fonction (événement){ alerte( "Bonjour, je suis le div de deuxième couche " ); }); document.getElementById( "span" ).addEventListener( "clic" , fonction (événement){ alerte( "Bonjour, je suis span. " ); }); } Il est prévu que lorsque le code ci-dessus clique sur span, une boîte de dialogue "Bonjour, je suis span." Oui, une telle boîte de dialogue apparaît :

🎜> Ce n'est évidemment pas ce que nous souhaitons ! Ce que nous voulons, c'est que celui qui clique affiche les informations de qui. Pourquoi la situation ci-dessus se produit-elle ? La raison réside dans le bouillonnement des événements. Lorsque vous cliquez sur span, span fera remonter l'événement généré div2 en tant que nœud parent et div1 en tant que nœud grand-parent recevra également cet événement, ils répondront donc à l'événement et exécuteront la réponse. . fonction. Le problème a maintenant été découvert, mais comment le résoudre ?

Méthode 1 : Considérons une situation plus concrète : une bulle dans l'eau monte du fond, et vous êtes dans l'eau maintenant et vous ne voulez pas que la bulle monte. Que devez-vous faire. ? --Piquez-le ! Sans bulles, elles ne bouillonneront naturellement pas. De même, pour un certain nœud, si nous ne voulons pas que l'événement qu'il traite actuellement continue à bouillonner, nous pouvons mettre fin au bouillonnement :

Dans la fonction de traitement correspondante, ajoutez event.stopPropagation() , Terminate la diffusion des événements, afin que l'événement reste à ce nœud et ne s'étale pas. Modifiez le fragment de script ci-dessus :

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( "您好，我是最外层div。" ); event.stopPropagation(); }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ }); document.getElementById( "span" ).addEventListener( "click" , function (event){ alert( "您好，我是span。" ); event.stopPropagation(); }); } Après un tel morceau de code, cliquer sur différents éléments donnera des invites différentes, et plusieurs boîtes n'apparaîtront pas.

Méthode 2 : L'événement contient une référence au nœud qui a initialement déclenché l'événement et une référence au nœud traitant actuellement l'événement. Si le nœud ne traite que les événements déclenchés par lui-même, les événements qui ne sont pas générés par lui-même. ne sera pas traité. event.target fait référence au nœud DOM qui a généré cet objet événement, et event.currrentTarget fait référence au nœud de traitement actuel. Nous pouvons vérifier si les deux cibles sont égales.

Par exemple, un événement span click génère un objet événement. Le event.target pointe vers l'élément span lorsque span gère cet événement, le event.currentTarget pointe également vers l'élément span si les deux sont égaux. , l'exécution correspondante sera exécutée. Lorsque l'événement est transmis à div2, event.currentTarget devient div2. À ce stade, il est jugé que les deux ne sont pas égaux, c'est-à-dire que l'événement n'est pas généré par div2 lui-même et qu'aucune logique de traitement de réponse n'est effectuée.

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是最外层div。" ); } }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是第二层div。" ); } }); document.getElementById( "span" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是span。" ); } }); } Comparaison :

Du point de vue de la livraison de l'événement : la première méthode consiste à annuler le bouillonnement de l'événement, c'est-à-dire que lorsque certains nœuds annulent le bouillonnement, l'événement ne sera plus livré; La deuxième méthode consiste à ne pas empêcher le bouillonnement, à filtrer les événements qui doivent être traités et à continuer à transmettre l'événement après le traitement ;

use using using a d through out through out through out through la première méthode exige que les sous-éléments de chaque élément mettent également fin à la transmission bouillonnante des événements, c'est-à-dire qu'ils sont fonctionnellement fortement liés à d’autres éléments. Cette méthode sera très fragile. Par exemple, si la fonction de traitement de l'élément span n'effectue pas de terminaison de bulle, l'événement sera transmis à div2, ce qui provoquera un message d'invite pour div2

Inconvénients de la deuxième méthode : la deuxième méthode ajoute des événements pour ; chaque élément Les fonctions de traitement d'écoute et la logique de traitement des événements sont très similaires, c'est-à-dire qu'elles ont toutes le jugement if (event.target == event.currentTarget), ce qui crée beaucoup de redondance de code. Il est désormais possible d'avoir trois éléments. , mais quand il y en a plus de 10 Un, que faire des centaines ?

Il existe également une fonction de traitement pour chaque élément, ce qui augmente dans une certaine mesure la complexité de la logique et du code. Analysons à nouveau la deuxième méthode : le principe de la deuxième méthode est qu'après que l'élément a reçu l'événement, il détermine si l'événement répond aux exigences, puis le gère en conséquence, puis l'événement continue de bouillonner et être transmis vers le haut ;

Puisque l'événement est transmis par bouillonnement, un certain nœud parent peut donc gérer l'événement de manière uniforme, déterminer l'endroit où l'événement s'est produit (c'est-à-dire le nœud où l'événement s'est produit), puis le gérer. par conséquent? La réponse est oui, en ajoutant un écouteur d'événement à l'élément body, puis en jugeant event.target pour produire différents comportements pour différentes cibles. Refactoriser le code de la deuxième méthode :

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventPerformed); } function eventPerformed(event) { var target = event.target; switch (target.id) { case "span" : alert( "您好，我是span。" ); break case "div1" : alert( "您好，我是第二层div。" ); break ; case "div2" : alert( "您好，我是最外层div。" ); break ; } } Le résultat sera de cliquer sur différents éléments, et seules les invites correspondantes apparaîtront, sans aucune invite redondante.

Grâce à la méthode ci-dessus, nous avons transmis les fonctions de traitement que chaque élément devrait avoir à son élément de corps de nœud grand-parent pour qu'il les exécute. En d'autres termes, span, div2 et div1 auront leur propre logique de réponse. au corps et laissez-le compléter la logique correspondante sans implémenter vous-même la logique correspondante. Ce mode est ce qu'on appelle la délégation d'événement.

Ce qui suit est un diagramme schématique :

Le bouillonnement d'événements JavaScript, c'est moi · Exemples d'images et de textes

Articles Liés