事件冒泡

时间 2019-11-10

原文原文链接

一、事件冒泡：一个元素接收到事件之后，会把自身接收的全部事件所有传播给它的父级，直到最顶层window。css

<body>
    <div id='div1'>
        <div id='div2'>
            <div id='div3'></div>
        </div>
    </div>
</body>

上述div 的嵌套关系是存在事件冒泡的。不管css如何对上面三个div进行位置的定位。函数

冒泡机制是默认存在的；this

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn1(){
    alert(this.id);
}
oDiv1.onclick = fn1;//给oDiv1添加了事件处理函数
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;

当点击div3时，不但会弹出div3 还会有div2 div1.
当oDiv2.onclick = fn1被注释时，点击div3，不但会弹出div3 还会有div1 弹出。（这也就是说明，oDiv2.onclick = fn1被注释以后，div2仍是可以接收到div3传过来的点击事件，没有弹出div2的缘由是没有告诉div2在接收到点击事件后如何进行处理。例如上面的注释不能说是给div2 添加事件，应该是给div2 添加了事件处理函数。）code

二、冒泡机制的存在即给咱们带了便利也给咱们带来了一些没必要要的麻烦。冒泡机制是默认存在的（多是存在带来的好处优于带来麻烦）。事件

三、阻止事件冒泡：get

在当前要阻止冒泡的时间函数中调用：ev.cancelBubble = true;

四、由于事件冒泡要传到父级，若是想对某些结构进行处理的时候，尤为是嵌套结构，能够想想事件的冒泡机制。io