深入分析js的冒泡事件

前端技术 2023/09/07 JavaScript

在javascript的dom操作做肯定会遇到js的冒泡事件，最常见的是div弹窗事件如图解

当点击灰色部分是弹窗消失，点击黑色部分时没有效果。

通过下面一段代码来分析js的冒泡事件

html代码：

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

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

本文地址：https://www.stayed.cn/item/17833

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案