Eingehende Analyse von js sprudelnden Ereignissen_Grundkenntnisse

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:

                                                                                                                                                                                                                      

                                                                                                                                                                                                           
Klick mich!
                                                                                                                                                              

<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冒泡事件分析

       

---

       

           
                Klick mich!
           
            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的冒泡事件了呢，有疑问就给我留言吧

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