事件冒泡

最新推荐文章于 2024-07-25 20:08:25 发布

weixin_30689307

最新推荐文章于 2024-07-25 20:08:25 发布

阅读量144

点赞数

原文链接：http://www.cnblogs.com/caicaihong/p/9317057.html

版权

在工作做事件冒泡经常遇到，但是事件冒泡很多时候是有作用的。比如我弄一个嵌套层事件，来验证事件冒泡。

<body>
    <div id="box1">
    我是div
    <span id="s1">我是span</span>
    </div>
</body>

首先，给span和div和body绑定响应函数：

                box1 = document.getElementById("box1");
                box1.onclick = function(){
                    alert("我是div")
                
                }
                
                s1 = document.getElementById("s1");
                s1.onclick = function(event){
                    alert("我是span")
                    //兼容
                    event = event || window.event
　　　　　　　　　　　　//取消冒泡
                    event.cancelBubble = true;
                }
                
                document.body.onclick = function(){
                    alert("我是body的响应函数")
                }

当点击span的响应函数时，div和body的响应函数都发生了，这是因为冒泡事件。

通过点击span发生响应，div和body都发生响应，这种影响关系称为事件冒泡
* 事件冒泡（BUbble）
* - 所谓的冒泡就是指事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
* - 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。，就是谁产生的吗，冒泡就在谁那里取消，比如
* 这个例子，span是最里层的元素，冒泡是由span产生或者div产生，所以取消冒泡就是在后代元素上取消，祖先元素就不会收到后代元素的影响了。（所有浏览器现在都兼容）

转载于:https://www.cnblogs.com/caicaihong/p/9317057.html