事件冒泡、事件捕获、取消冒泡、事件委托-CSDN博客

A.事件冒泡

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

<div class="wrapper">
  <div class="content">
    <div class="box"></div>
  </div>
</div>
复制代码

JS

var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.addEventListener('click', function (){
    console.log('wrapper-bubble');
},false);
content.addEventListener('click',function (){
    console.log('content-bubble');
} ,false);
box.addEventListener('click',function (){
    console.log('box-bubble');
} ,false);
复制代码

执行结果分析

点击【box】    返回 box-bubble content-bubble wrapper-bubble
点击【content】返回 content-bubble wrapper-bubble
点击【wrapper】返回 wrapper-bubble
总结：自子元素冒泡向父元素。（自底向上）
复制代码

B.事件捕获

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素。（自顶向下）

wrapper.addEventListener('click', function (){
    console.log('wrapper-catch');
},true);
content.addEventListener('click',function (){
    console.log('content-catch');
} ,true);
box.addEventListener('click',function (){
    console.log('box-catch');
} ,true);
复制代码

执行结果分析

点击【box】    返回 wrapper-catch content-catch box-catch
点击【content】返回 wrapper-catch content-catch 
点击【wrapper】返回 wrapper-catch
总结：自父元素捕获至子元素。（自顶向下）
复制代码

1) 一个对象的一个事件类型上面绑定的事件处理函数只能遵循一个事件模型
2) 触发顺序，先捕获，后冒泡
3) focus,blur,change,submit,reset,select等事件不冒泡
复制代码

【触发顺序：先捕获，后冒泡】解析

如果上面两端代码同时存在

点击【box】    返回   wrapper-catch //捕获
                    content-catch //捕获
                    box-bubble //执行（函数执行遵循谁先绑定谁先执行）
                    box-catch //执行
                    content-bubble //冒泡
                    wrapper-bubble //冒泡
                    
点击【content】返回   wrapper-catch //捕获
                    content-bubble //执行
                    content-catch //执行
                    wrapper-bubble //冒泡
                    
点击【wrapper】返回   wrapper-bubble //执行
                    wrapper-catch //执行
总结：自父元素捕获至子元素。（自顶向下）
复制代码

C.取消冒泡

W3C标准 evnet.stopPropagation();(不支持ie9以下)

IE event.cancelBubble = true;

封装取消冒泡的兼容性函数

function stopBubble(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble = true;
    }
}
复制代码

D.事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

<ul id="father">
    <li>son1</li>
    <li>son2</li>
    <li>son3</li>
    <li>son4</li>
</ul>
复制代码

js

function who(){
   var oFather = document.getElementById('father');
   oFather.onclick = function(e){
       var event = e || window.event;
       //事件源对象：1）event.target；2）IE : event.srcElement  
       var target = event.target || event.srcElement;
       if(target.nodeName.toLowerCase() == 'li'){
            console.log(target.innerHTML);
       }
   }
}
who();
复制代码

点击li产生事件冒泡触发ul上面绑定的事件。且事件里面判断事件源对象来执行函数，每次只执行一次dom操作，减少dom的操作，优化的性能。

E.取消默认事件

取消默认事件3种方式以及它们的局限

return false;以对象属性的方式注册的事件才生效
event.preventDefault();W3C标准，IE9以下不兼容
event.returnValue = false;兼容IE
复制代码

document.oncontextmenu = function (e){
    console.log('a');
    //return false;
    //e.preventDefault();
    e.returnValue = false;
}
复制代码

封装取消默认事件的兼容性函数

  function cancelhandler(event){
    if(event.preventDefault){
      event.preventDefault();
    }else{
      event.returnValue = false;
    }
  }
复制代码