Étape d'événement DOM et capture d'événement et séquence d'exécution de bouillonnement d'événement (explication graphique et textuelle détaillée)

Étape d'événement DOM et capture d'événement et séquence d'exécution de bouillonnement d'événement (explication graphique et textuelle détaillée)_jquery

WBOY

Libérer： 2016-05-16 15:44:25

original

1945 Les gens l'ont consulté

Comme le dit le proverbe, une bonne mémoire n'est pas aussi bonne qu'un mauvais stylo. Si vous ne comprenez pas parfaitement autant d'articles techniques, il sera facile d'oublier rapidement les points techniques. L'éditeur parcourt habituellement et les notes que j'ai compilées pour les partager avec vous.

Pendant le processus de développement, nous espérons tous utiliser les frameworks matures d'autres personnes, car se tenir sur les épaules de géants améliorera considérablement l'efficacité de notre développement. Cependant, nous devons également comprendre ses principes fondamentaux. Par exemple, pour les événements DOM, le framework jquery nous aide à encapsuler et à résumer les différents comportements de différents navigateurs, apportant ainsi une grande commodité au traitement des événements. Cependant, les navigateurs deviennent progressivement unifiés et standardisés, et nous pouvons utiliser les interfaces standardisées officielles avec plus de sécurité. Car ce n’est qu’en gagnant le cœur et l’esprit de nombreux développeurs que le navigateur pourra aller plus loin. Tout comme lorsque nous utilisons un navigateur de version inférieure pour ouvrir certaines pages, il nous sera demandé d'utiliser un navigateur avancé tel que Chrome pour y accéder. Mais il s’agit d’un processus révolutionnaire. Afin que notre page Web puisse mieux servir un plus grand nombre de personnes, nous devons désormais être mieux compatibles avec ces problématiques historiques. Pour être compatible, en plus de s’appuyer sur le framework, il faut comprendre ses principes de base.

Trois étapes des événements DOM

Lorsqu'un événement DOM est déclenché, il ne se déclenche pas simplement une seule fois sur l'objet lui-même, mais va passer par trois étapes différentes :

1. Phase de capture : Tout d'abord, passez du document de nœud racine du document à l'objet déclencheur d'événement et capturez l'objet d'événement de l'extérieur vers l'intérieur

;

2. Étape cible : Arrivez à l'emplacement cible de l'événement (là où l'incident s'est produit) et déclenchez l'événement

;

3. Étape bulle : remontez ensuite de l'emplacement de l'événement cible jusqu'au nœud racine du document, et faites bouillonner l'objet événement de l'intérieur vers l'extérieur.

Source de la citation : http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

L'ordre de capture et de bouillonnement des événements est évident.

Partie expérimentale

Ouvrez l'éditeur en ligne : http://jsbin.com/goqede/edit?html,css,js,output

Le code est le suivant :

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-">
   <title>Document</title>
   <style>
     #outer{
       text-align: center;
       width: px;
       height: px;
       background-color: #ccc;
       margin: auto;
     }
     #middle{
       width: px;
       height: px;
       background-color: #f;
       margin: auto;
     }
     #inner{
       width: px;
       height: px;
       background-color: #f;
       margin: auto;
       border-rad
     }
   </style>
 </head>
 <body>
   <div id='outer'>
     <span>outer</span>
     <div id='middle'>
       <span>middle</span>
       <div id='inner'>
         <span>inner</span>
       </div>
     </div>
   </div>
   <script>
     function $(element){
       return document.getElementById(element);
     }
     function on(element,event_name,handler,use_capture){
       if(addEventListener){
         $(element).addEventListener(event_name,handler,use_capture);
       }
       else{
         $(element).attachEvent('on'+event_name,handler);
       }
     }
     on("outer","click",o_click_c,true);
     on("middle","click",m_click_c,true);
     on("inner","click",i_click_c,true);
     on("outer","click",o_click_b,false);
     on("middle","click",m_click_b,false);
     on("inner","click",i_click_b,false);
     function o_click_c(){
       console.log("outer_捕获");
       alert("outer_捕获");
     }
     function m_click_c(){
       console.log("middle_捕获")
       alert("middle_捕获");
     }
     function i_click_c(){
       console.log("inner_捕获")
       alert("inner_捕获");
     }
     function o_click_b(){
       console.log("outer_冒泡")
       alert("outer_冒泡");
     }
     function m_click_b(){
       console.log("middle_冒泡")
       alert("middle_冒泡");
     }
     function i_click_b(){
       console.log("inner_冒泡")
       alert("inner_冒泡");
     }
   </script>
 </body>
 </html>

Copier après la connexion

Lorsque nous cliquons à l'intérieur, le résultat est :

capture_extérieure

middle_capture

capture_intérieure

bulle_inner

middle_bubble

bulle_extérieure

On peut voir que l'événement est d'abord capturé de l'extérieur vers l'intérieur, jusqu'à ce que l'élément événementiel soit atteint, puis remonte jusqu'au nœud racine de l'intérieur vers l'extérieur

conseils :

Lorsqu'un événement est déclenché dans l'étape cible, il sera exécuté selon l'ordre d'inscription de l'événement. L'ordre d'inscription dans les deux autres étapes n'affecte pas l'ordre d'exécution de l'événement. Autrement dit, si les événements de bouillonnement et les événements de capture sont enregistrés ici, ils seront exécutés dans l'ordre d'enregistrement.

Par exemple, lorsque je clique à l'intérieur, selon l'ordre ci-dessus, la réponse est bien la réponse que l'on souhaite :

Lorsque ma séquence d'inscription à l'événement est modifiée par le code suivant :

Quand on clique sur extérieur :

Quand on clique sur le milieu :

Quand on clique à l'intérieur :

On peut voir que l'ordre d'exécution de l'événement sur l'élément événementiel dans l'étape cible est déterminé par l'ordre d'inscription de l'événement

Le contenu ci-dessus est l'étape de l'événement DOM et la séquence d'exécution de la capture d'événement et du bouillonnement d'événement dans cet article (images et textes détaillés). J'espère qu'il sera utile pour le travail et l'étude futurs de chacun.