In-depth analysis of js bubbling events_Basic knowledge

When doing DOM operations in JavaScript, you will definitely encounter js bubbling events. The most common one is the div pop-up event as shown in the illustration

When you click on the gray part, the pop-up window disappears, but when you click on the black part, it has no effect.

Use the following code to analyze js bubbling events

html code:

Copy code The code is as follows:

                                                                                                                                                                                                                            

                                                                                                                                                                                                                               
Click me !
                                                            
                                                                                       

<script><br> var box=document.querySelector(".box"),<br> btn=document.querySelector(".btn");<br> box.onclick=function(event){<br> alert("I am div");<br> }<br> btn.onclick=function(event){<br> alert("I am button");<br> }<br> </script>





Using the 3D view of the default developer tools of Firefox browser, you can clearly see the order of div layers

Illustration:

When the button is clicked, "I am button" will pop up and then "I am div" will pop up, because the button event is triggered first and then the next layer div click event is triggered,

The triggering of events is based on the first-in, first-out principle.

Illustration:

Then sometimes we don’t want multiple events to trigger and cause conflicts, so events have stopPropagation(); methods to prevent bubbling

There is also an event method that is also commonly used, such as a link. If I don’t want to jump when clicking the link, I use the event.preventDefault(); method

The example code is as follows

Copy code The code is as follows:

   
   
   


   

       

js冒泡事件分析

       

---

       

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

   

    <script><br>     var box=document.querySelector(".box"),<br>     btn=document.querySelector(".btn");<br>     box.onclick=function(event){<br>         alert("我是div");<br>     }<br>     btn.onclick=function(event){<br>         alert("我是button");<br>         event.stopPropagation();<br>     }<br>     document.getElementById('link').onclick=function(event){<br>         alert("我是link");<br>         event.preventDefault();<br>     }<br>     /*区分event.stopPropagation();和event.preventDefault();<br>       前者使用stopPropagation()方法阻止事件冒泡<br>       后者是阻止默认的行为比如阻止超链接<br>     */<br>     </script>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn