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

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

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

冒泡机制是默认存在的;

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 添加了事件处理函数。)

2、冒泡机制的存在即给我们带了便利也给我们带来了一些不必要的麻烦。冒泡机制是默认存在的(可能是存在带来的好处优于带来麻烦)。

3、阻止事件冒泡:

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

4、因为事件冒泡要传到父级,如果想对某些结构进行处理的时候,尤其是嵌套结构,可以想一想事件的冒泡机制。


kobe
0 声望0 粉丝