js的事件冒泡和事件捕获

一、定义

事件捕获：从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和冒泡、捕获可以阻止某个元素上的特定事件