事件冒泡、事件捕获、事件委托

一、DOM事件流

• DOM事件流（event flow）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段，事件冒泡和事件捕获都是描述事件触发时序问题的术语；
• 事件捕获（event capturing）：当鼠标点击或触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应事件的话，会先触发父元素绑定的事件，是自上而下的；
  事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行传播，直到根节点，是自下而上的；
• 无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，它就像一根引线，只有通过引线才能将绑在引线上的鞭炮（事件监听器）引爆；
  
  

  DOM事件流
  
  三个阶段:1-5捕获过程、5-6目标过程、6-10冒泡过程
  二、事件绑定方法：addEventListener、attachEvent
• addEventListener

document.getElementById("child").addEventListener("click", function(e) {
      console.log("child事件被触发，" + this.id)
 },true)

• attachEvent

element.attachEvent('onclick', function(){
        // ...
});

三、事件冒泡

• 绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获，true为事件捕获，false为事件冒泡，默认为false即事件冒泡，JQuery的e.stopPropagation会阻止冒泡，意思是到我为止，我的上一级的事件就不要触发了；

// 事件冒泡

  

    
child
  
  

二、事件捕获

// 事件捕获

  

    
child
  
  

  
  
  



  

    父元素
    

      子元素
    
  
  

事件冒泡和事件捕获

     
wrapDiv
        
innerP
            textSpan
        
    
    

• target和currentTarget都是event上面的属性，target是真正发生事件的DOM元素，而currentTarget是当前事件发生在哪个DOM元素上；目标阶段也就是 target == currentTarget的时候，由于window没有nodeName这个属性，所以是undefined；

• 在目标元素上不会遵守先发生捕获后发生冒泡这一规则，而是先绑定的事件先发生；

  
  
  

  事件冒泡和事件捕获案例2

五、事件委托

var parent = document.getElementById("parent");
    var child = document.getElementById("child");
    parent.onclick = function(e) {
      if (e.target.id == "child") {
        console.log("您点击了child元素")
      }
      if (e.target.id == "parent") {
        console.log("您点击了parent元素")
      }
    }

六、事件绑定的方法

• 直接获取元素绑定：

element.onclick = function(e){
        // ...
};

优点：简单和稳定，可以确保它在你使用的不同浏览器中运作一致；处理事件时，this关键字引用的是当前元素，这很有帮组;
缺点：只会在事件冒泡中运行；一个元素一次只能绑定一个事件处理函数，新绑定的事件处理函数会覆盖旧的事件处理函数；事件对象参数(e)仅非IE浏览器可用;

• 直接在元素里面使用事件属性：
• W3C方法：

element.addEventListener('click', function(e){
        // ...
}, false);

优点：该方法同时支持事件处理的捕获和冒泡阶段；事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)；在事件处理函数内部，this关键字引用当前元素；事件对象总是可以通过处理函数的第一个参数(e)捕获；可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件;
缺点：IE不支持，你必须使用IE的attachEvent函数替代;

• IE下的方法：

element.attachEvent('onclick', function(){
        // ...
});

优点：可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件;
缺点：IE仅支持事件捕获的冒泡阶段；事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）；事件对象仅存在与window.event参数中；事件必须以ontype的形式命名，比如，onclick而非click；仅IE可用，你必须在非IE浏览器中使用W3C的addEventListener；
注意：不是意味这低版本的ie没有事件捕获，它也是先发生事件捕获，再发生事件冒泡，只不过这个过程无法通过程序控制；
七、解除事件

element.removeEventListener('click', function(e){
        // ...
}, false);

IE:

element.detachEvent('onclick', function(){
        // ...
});

八、阻止事件
在支持addEventListener()的浏览器中，可以调用事件对象的stopPropagation()方法以阻止事件的继续传播，如果在同一对象上定义了其他处理程序，剩下的处理程序将依旧被调用，但调用stopPropagation()之后任何其他对象上的事件处理程序将不会被调用，不仅可以阻止事件在冒泡阶段的传播，还能阻止事件在捕获阶段的传播；
IE9之前的IE不支持stopPropagation()方法，而是设置事件对象cancelBubble属性为true来实现阻止事件进一步传播；
九、阻止事件的默认行为
e.preventDefault()可以阻止事件的默认行为发生，默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希望发生这些事情，所以需要阻止默认行为；
IE9之前的IE中，可以通过设置事件对象的returnValue属性为false达到同样的效果；

function cancelHandler(event){
    var event=event||window.event;//兼容IE
    
    //取消事件相关的默认行为
    if(event.preventDefault)    //标准技术
        event.preventDefault();
    if(event.returnValue)    //兼容IE9之前的IE
        event.returnValue=false;
    return false;    //用于处理使用对象属性注册的处理程序
}