suchen

Heim >Web-Frontend >js-Tutorial >DOM-Ereignisphase und Ereigniserfassung sowie Ausführungssequenz für das Sprudeln von Ereignissen (detaillierte Grafik- und Texterklärung)_jquery

DOM-Ereignisphase und Ereigniserfassung sowie Ausführungssequenz für das Sprudeln von Ereignissen (detaillierte Grafik- und Texterklärung)_jquery

WBOY
WBOYOriginal
2016-05-16 15:44:251940Durchsuche

Wie das Sprichwort sagt: Ein gutes Gedächtnis ist nicht so gut wie ein schlechter Stift. Wenn Sie so viele technische Artikel nicht gründlich verstehen, werden Sie die technischen Punkte schnell vergessen Der Editor durchsucht normalerweise die Notizen, die ich zusammengestellt habe, um sie mit Ihnen zu teilen.

Während des Entwicklungsprozesses hoffen wir alle, die ausgereiften Frameworks anderer Leute nutzen zu können, denn wenn wir auf den Schultern von Giganten stehen, wird dies die Effizienz unserer Entwicklung erheblich verbessern. Allerdings sollten und müssen wir auch seine Grundprinzipien verstehen. Beispielsweise hilft uns das JQuery-Framework bei DOM-Ereignissen dabei, die unterschiedlichen Verhaltensweisen verschiedener Browser zu kapseln und zu abstrahieren, was die Ereignisverarbeitung erheblich vereinfacht. Allerdings werden Browser nach und nach vereinheitlicht und standardisiert, und wir können offizielle standardisierte Schnittstellen sicherer verwenden. Denn nur wenn der Browser die Herzen und Köpfe vieler Entwickler gewinnt, kann er weiterkommen. Genauso wie wenn wir zum Öffnen bestimmter Seiten einen Browser einer niedrigeren Version verwenden, werden wir aufgefordert, für den Zugriff einen erweiterten Browser wie Chrome zu verwenden. Aber das ist ein revolutionärer Prozess. Damit unsere Webseite mehr Menschen bedienen kann, müssen wir uns nun besser mit diesen historischen Themen auseinandersetzen. Um kompatibel zu sein, müssen wir uns nicht nur auf das Framework verlassen, sondern auch seine Grundprinzipien verstehen.

Drei Phasen von DOM-Events

Wenn ein DOM-Ereignis ausgelöst wird, wird es nicht einfach einmal am Objekt selbst ausgelöst, sondern durchläuft drei verschiedene Phasen:

1. Erfassungsphase : Gehen Sie zunächst vom Stammknotendokument des Dokuments zum Ereignisauslöserobjekt und erfassen Sie das Ereignisobjekt von außen nach innen

2. Zielphase : Erreichen Sie den Zielort des Ereignisses (wo sich der Vorfall ereignet hat) und lösen Sie das Ereignis aus;

3. Blasenphase

: Verfolgen Sie dann vom Zielort des Ereignisses zurück zum Stammknoten des Dokuments und blasen Sie das Ereignisobjekt von innen nach außen.

Zitierquelle:

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

Die Reihenfolge der Ereigniserfassung und des Ereignis-Bubblings ist offensichtlich.

Experimenteller Teil

Öffnen Sie den Online-Editor:

http://jsbin.com/goqede/edit?html,css,js,output

Der Code lautet wie folgt: 

<!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>
Wenn wir nach innen klicken, ist das Ergebnis:

outer_capture

middle_capture

inner_capture

inner_bubble

middle_bubble

outer_bubble

Es ist ersichtlich, dass das Ereignis zuerst von außen nach innen erfasst wird, bis das Ereigniselement erreicht ist, und dann von innen nach außen zum Wurzelknoten sprudelt

Tipps:

Wenn ein Ereignis in der Zielphase ausgelöst wird, wird es gemäß der Reihenfolge der Ereignisregistrierung ausgeführt. Die Reihenfolge der Registrierung in den anderen beiden Phasen hat keinen Einfluss auf die Reihenfolge der Ereignisausführung. Das heißt, wenn hier sowohl Blasenereignisse als auch Einfangereignisse registriert sind, werden sie in der Reihenfolge der Registrierung ausgeführt.

Wenn ich zum Beispiel in der oben genannten Reihenfolge auf „Innen“ klicke, ist die Antwort tatsächlich die Antwort, die wir wollen:

,

Wenn meine Veranstaltungsregistrierungssequenz auf den folgenden Code geändert wird:

Wenn wir nach außen klicken:

Wenn wir auf die Mitte klicken:

Wenn wir nach innen klicken:

Es ist ersichtlich, dass die Reihenfolge der Ereignisausführung auf dem Ereigniselement in der Zielphase durch die Reihenfolge der Ereignisregistrierung bestimmt wird

Der obige Inhalt ist die DOM-Ereignisphase und die Ausführungssequenz der Ereigniserfassung und des Ereignissprudelns in diesem Artikel (detaillierte Bilder und Texte werden hoffentlich für die zukünftige Arbeit und das Studium hilfreich sein).

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery implementiert den Code für ausgewählte Dropdown-Felder zur Verschönerung von SpezialeffektenNächster Artikel：jquery implementiert den Code für ausgewählte Dropdown-Felder zur Verschönerung von Spezialeffekten

In Verbindung stehende Artikel

Mehr sehen