捕获与冒泡

捕获与冒泡

如下，有三层DIV结构，div1 > div2 >div3

 

在每个div上都绑定两个事件监听器：

div1.addEventListener('click', function(){
    console.log('div1: capture');
}, true);

div1.addEventListener('click', function(){
    console.log('div1: bubble');
}, false);

div2.addEventListener('click', function(){
    console.log('div2: capture');
}, true);

div2.addEventListener('click', function(){
    console.log('div2: bubble');
}, false);

div3.addEventListener('click', function(){
    console.log('div3: capture');
}, true);

div3.addEventListener('click', function(){
    console.log('div3: bubble');
}, false);

 

在div3上点击时输出：

div1: capture

div2: capture

div3: capture

div3: bubble

div2: bubble

div1: bubble

 

在div2上点击时输出：

div1: capture

div2: bubble

div2: capture

div1: bubble

 

在div1上点击时输出：

div1: capture

div1: bubble

 

阻止冒泡的方法

使用事件对象的 Event.prototype.stopPropagation方法

 

继续上面的例子，执行下面脚本

div3.addEventListener('click', function(e){
    e.stopPropagation();
}, false);

 

然后再次点击div3，输出：

div1: capture

div2: capture

div3: capture

div3: bubble

此时，div3的click事件不会再冒泡到它的父元素了。