Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

Eingehende Analyse von js sprudelnden Ereignissen_Grundkenntnisse

WBOY
Freigeben： 2016-05-16 16:29:01
Original
1647 Leute haben es durchsucht

Wenn Sie DOM-Operationen in JavaScript ausführen, werden Sie definitiv auf js-Bubbling-Ereignisse stoßen. Das häufigste ist das div-Popup-Ereignis, wie in der Abbildung gezeigt

Wenn Sie auf den grauen Teil klicken, verschwindet das Popup-Fenster, aber wenn Sie auf den schwarzen Teil klicken, hat es keine Wirkung.

Verwenden Sie den folgenden Code, um js-Bubbling-Ereignisse zu analysieren

HTML-Code:

Code kopieren Der Code lautet wie folgt:





js Bubbling Event




                                                                                                                                                                                                                      

                                                                                                                                                                                                           

<script><br> var box=document.querySelector(".box"),<br> btn=document.querySelector(".btn");<br> box.onclick=function(event){<br> alarm("Ich bin div");<br> }<br> btn.onclick=function(event){<br> Alert("Ich bin Button");<br> }<br> </script>





Mit der 3D-Ansicht der Standard-Entwicklertools des Firefox-Browsers können Sie die Reihenfolge der Div-Ebenen deutlich erkennen

Abbildung:

Wenn auf die Schaltfläche geklickt wird, wird „Ich bin die Schaltfläche“ und dann „Ich bin Div“ angezeigt, da zuerst das Schaltflächenereignis und dann das Div-Klickereignis der nächsten Ebene ausgelöst wird,

Die Auslösung von Ereignissen erfolgt nach dem First-In-First-Out-Prinzip.

Abbildung:

Dann möchten wir manchmal nicht, dass mehrere Ereignisse Konflikte auslösen und verursachen, daher verfügen Ereignisse über stopPropagation();-Methoden, um Blasenbildung zu verhindern

Es gibt auch eine häufig verwendete Ereignismethode, z. B. einen Link. Wenn ich beim Klicken auf den Link nicht springen möchte, verwende ich die Methode event.preventDefault();

Der Beispielcode lautet wie folgt

Code kopieren

Der Code lautet wie folgt:




   
    js冒泡事件
   


   

       

js冒泡事件分析


       

       

           
            http://www.liteng.org" id="link">我是链接
       

   

    <script><br>     var box=document.querySelector(".box"),<br>     btn=document.querySelector(".btn");<br>     box.onclick=function(event){<br>         alarm("我是div");<br>     }<br>     btn.onclick=function(event){<br>         alarm("我是button");<br>         event.stopPropagation();<br>     }<br>     document.getElementById('link').onclick=function(event){<br>         warning("我是link");<br>         event.preventDefault();<br>     }<br>     /*区区分event.stopPropagation(); undevent.preventDefault();<br>       Die Funktion „stopPropagation()“ wird nicht verwendet.<br>       后者是阻止默认的行为比如阻止超链接<br>     */<br>     </script>


小伙伴们是否能够全面理解js的冒泡事件了呢，有疑问就给我留言吧

Verwandte Etiketten：
javascript js 冒泡事件
Quelle：php.cn
Vorheriger Artikel：Einführung in die Implementierungsprinzipien von RPC (Remote Procedure Call) in node.js_node.js Nächster Artikel：3 Möglichkeiten, Synchronisationsvorgänge in node.js_node.js zu implementieren
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Kann ein in mehreren Routen deklarierter Workerpool seine CPU-Auslastung trotzdem beibehalten, ohne sich um den Schwellenwert zu kümmern? Ich hoffe, ein node.js-System mit einem Workerpool zu finden, um CPU-intensive Aufgaben zu...
Aus 2024-04-06 19:54:23
0
1
444
Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...
Aus 2024-04-06 18:16:26
0
1
403
Ausgeblendete Seitenbereiche anzeigen: aktiviert Ich hätte gerne ein Navigationsmenü im Seitenbereich mit der Möglichkeit, über ein animier...
Aus 2024-04-06 15:49:33
0
1
319
Sollten wir SSG verwenden, um mit Nuxt.js erstellte Dashboards bereitzustellen? Wir werden mit Nuxt.js ein Dashboard für den internen Gebrauch entwickeln. Da es sich um e...
Aus 2024-04-06 13:17:44
0
1
493
Electron erhält AppData beim Vorladen Wie erhalte ich das vorinstallierte AppData-Verzeichnis? Background.js[...]asyncfunctioncr...
Aus 2024-04-06 11:05:31
0
1
417
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage