一、定義

事件捕獲：從document到觸發事件的那個節點，自上而下觸發事件；

事件冒泡：從觸發事件節點依次向上觸發事件，直到document。

原聲js中，綁定事件方法addEventListener(eventName，function，bool)的第三個參數控制事件觸發順序。true為捕獲，false為冒泡，默認冒泡。

event.stopPropagation()會阻止事件流的傳播。

二、實例

html結構：

<div id=‘parent‘>
        <div id=‘child‘>
        </div>
 </div>

給div綁定事件：

1.冒泡過程

parent.addEventListener(‘click‘, function(){
    console.log(‘parent‘);
},false);
child.addEventListener(‘click‘, function(){
    console.log(‘child‘);
},false);
body.addEventListener(‘click‘, function(){
    console.log(‘body‘);
},false);

結果如下：

2.捕獲過程

parent.addEventListener(‘click‘, function
 
(){
    console.log(‘parent‘);
},true);
child.addEventListener(‘click‘, function(){
    console.log(‘child‘);
},true);
body.addEventListener(‘click‘, function(){
    console.log(‘body‘);
},true);

結果如下：

三、應用

1.事件委托：利用事件冒泡處理動態元素事件綁定的方法。

<div id=‘parent‘>
        <div class=‘child‘></div
 
>
        <div class=‘child‘></div>
        <div class=‘child‘></div>
    </div>

如果要給class為child的div綁定動態事件，使用冒泡則效率最高：

parent.addEventListener(‘mousemove‘, function(event){
        var tDiv =event.target;
        if ($(tDiv).hasClass(‘child‘)) {
           $(tDiv).css(‘background‘, ‘red‘).siblings().css(‘background‘, ‘green‘);
        }     
        return false;   
    },false);

2.結合stopPropagation和冒泡、捕獲可以阻止某個元素上的特定事件

js的事件冒泡和事件捕獲