Analyse approfondie des événements bouillonnants js_Connaissances de base

Lorsque vous effectuez des opérations DOM en JavaScript, vous rencontrerez certainement des événements bouillonnants js. Le plus courant est l'événement contextuel div, comme le montre l'illustration

.

Lorsque vous cliquez sur la partie grise, la fenêtre pop-up disparaît, mais lorsque vous cliquez sur la partie noire, cela n'a aucun effet.

Utilisez le code suivant pour analyser les événements bouillonnants js

code html :

Copier le code Le code est le suivant :

                                                                                                                                                                                                                   

                                                                                                                                                                                                                           
Cliquez sur moi !
                                                          
                                                                                   

<script><br> var box=document.querySelector(".box"),<br> btn=document.querySelector(".btn");<br> box.onclick=fonction(événement){<br> alert("Je suis div");<br> ><br> btn.onclick=fonction(événement){<br> alert("Je suis le bouton");<br> ><br> </script>





En utilisant la vue 3D des outils de développement par défaut du navigateur Firefox, vous pouvez voir clairement l'ordre des couches div

Illustration :

Lorsque vous cliquez sur le bouton, "Je suis un bouton" apparaîtra, puis "Je suis un div" apparaîtra, car l'événement de bouton est déclenché en premier, puis l'événement de clic div de couche suivant est déclenché,

Le déclenchement des événements est basé sur le principe du premier entré, premier sorti.

Illustration :

Ensuite, parfois, nous ne voulons pas que plusieurs événements se déclenchent et provoquent des conflits, c'est pourquoi les événements ont des méthodes stopPropagation(); Il existe également une méthode événementielle qui est également couramment utilisée, comme un lien. Si je ne veux pas sauter en cliquant sur le lien, j'utilise la méthode event.preventDefault();

L'exemple de code est le suivant

Copier le code

Le code est le suivant :

   
   
   


   

       

js冒泡事件分析

       

---

       

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

   

    <script><br>     var box=document.querySelector(".box"),<br>     btn=document.querySelector(".btn");<br>     box.onclick=fonction(événement){<br>         alert("我是div");<br>     ><br>     btn.onclick=fonction(événement){<br>         alert("我是button");<br>         event.stopPropagation();<br>     ><br>     document.getElementById('link').onclick=function(event){<br>         alert("我是link");<br>         event.preventDefault();<br>     ><br>     /*区分event.stopPropagation();etevent.preventDefault();<br>       Il y a un arrêt à la fonction stopPropagation()<br>       后者是阻止默认的行为比如阻止超链接<br>     */<br>     </script>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn