Javascript事件机制-冒泡与捕获

我们经常说的Javascript中的事件分为捕获阶段，执行阶段和冒泡阶段，对应的是不同的标准对于事件处理的规则。以IE为代表的时间冒泡机制和以Netscape为代表的时间补获机制。

1:事件冒泡
事件冒泡的处理过程是事件开始的时候从最具体的元素到最不具体的元素，即事件的传播路径是子元素-父元素-父父元素，自底向上执行

2:事件补获
事件补获的过程和冒泡的相反，自顶向下执行，先是最不具体的元素接收到事件，然后一直往下执行到最具体的元素

3:事件处理
由于存在两种不同的事件机制，所以对应的存在了两种不同的事件绑定机制
3.1:符合W3C标准的标准浏览器绑定机制
又称DOM2级事件处理机制，对应的事件的指定和删除的方法是addEventListener和removeEventListener。
function addEventListener(事件名称,事件动作,是否绑定在捕获阶段)
function removeEventListener(事件名称,事件动作,是否绑定在捕获阶段)
在采用addEventListener添加事件的时候，可以添加多个事件，如下：

var btn = document.querySelector("#btn");
btn.addEventListener("click",function(){
  alert(this.id);
}, false);
btn.addEventListener("click", function(){
  alert("double operation");
}, false);

添加完上述两个事件之后，两个事件会按照定义的顺序执行，即先执行ID，再执行double operation。
在事件执行过程中，如果要禁止事件继续流动，则使用event.stopPropgation()
3.2:IE的事件绑定机制
又称IE事件处理程序，IE使用的事件处理方法为attachEvent和detachEvent。
function attachEvent("on"+事件名称, 事件动作)
function detachEvent("on"+事件名称, 事件动作)
在采用attachEvent的时候也可以添加多次事件，如下：

var btn = document.querySelector("#btn");
btn.attatchEvent("onclick",function(){
  alert("clicked");
});
btn.attatchEvent("onclick", function(){
  alert("double operation");
}, false);

要注意的是，现在安装的事件的执行顺序与定义的顺序相反，即先出现double operation，而后出现clicked。
在执行过程中，要是想取消事件，可以采用event.cancelBubble=true;
需要注意的是当前的事件处理机制中的this是绑定到window下的。
3.3:DOM0级事件处理程序
比较传统的方式，就是将一个函数赋值给一个事件处理程序属性，如下：

var btn = document.querySelector("#btn");
btn.onclick=function(){
  alert("clicked");
}

取消事件的话是btn.onclick = null
并且只能绑定一个事件

4:跨浏览器事件处理

var EventUtil = {
  addHandler:function(element, type, handler){
    if(element.addEventListener){
      element.addEvnetListener(type, handler, false);
    }else if(element.attachEvent){
      element.attatchEvent("on" + type, handler);
    }else{
      element["on"+type] = handler;
    }
  },
  removeHandler:function(element, type,handler){
    if(element.removeEventLisntener){
        element.removeEventListener(type, handler, false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type, handler);
    }else{
      element["on" + type] = null;
    }
  },
  getEvent:function(event){
    return event ? event || window.event;
  },
  getTarget:function(event){
    return event.target || event.srcElement;
  },
  preventDefault:function(event){
    if(event.preventDefault){
      event.preventDefault();
    }else{
      event.returnValue = false;
    }
  },
  stopPropagation:function(event){
    if(event.stopPrapagation){
      event.stopPropagation();
    }else{
      event.cancelBubble = true;
    }
  }
}