js事件冒泡和事件捕获详解

        var div=document.getElementById("myDiv");    
        div.onclick=function(event){
            alert("div");
        };
        document.body.addEventListener("click",function(event){
            alert("event bubble");
        },false);
        document.body.addEventListener("click",function(event){
            alert("event catch");
        },true);

，将先输出“event catch”，再输出“div”，最后输出“event bubble”。

二、事件处理程序

事件是用户或浏览器自身执行的某种动作，而响应某个事件的函数叫做事件处理程序。HTML事件处理程序、DOM0级事件处理程序和IE事件处理程序均以“on”开头，DOM2级事件处理程序不需要加“on”。

HTML事件处理程序

通过将事件作为HTML元素的属性来实现，包含以下两种方法：

或者调用其他地方定义的脚本：

        function showMessage() {
            alert("confirm");
        }

（注：函数定义必须放在调用之前）

DOM0级事件处理程序

 通过Javascript指定事件处理程序的传统方式，所有浏览器均支持。每个元素（包括window，document）都有自己的事件处理程序属性，但是必须在DOM节点加载完之后才会有效。如下所示：

        var div = document.getElementById("myDiv");
        div.onclick = function(event) {
            alert("div");
        };

使用DOM0级方法指定的事件处理程序被认为是元素的方法，在元素的作用域中运行。this引用当前元素，如下：

        var div = document.getElementById("myDiv");
        div.onclick = function(event) {
            alert(this.id);
        };

输出“myDiv”。

删除通过DOM0级方法指定的事件处理程序：

div.onclick=null;

DOM2级事件处理程序

IE9，chrome，Firefox，Opera，Safari均实现了DOM2级事件处理程序，绑定事件方法addEventListener()接收三个参数：事件名称，事件处理函数和一个布尔值。布尔值为true，则表示在捕获阶段调用事件处理程序；如果为false，则表示在冒泡阶段调用事件处理程序。addEventListener允许在同一个元素上添加多个事件处理程序，如下所示：

        var div = document.getElementById("myDiv");
        div.addEventListener("click", function(event) {
            alert("event bubble");
        }, false);
        div.addEventListener("click", function(event) {
            alert("event catch");
        }, true);

先输出“event bubble”，后输出“event catch”，说明addEvenListener绑定的处理程序执行顺序和绑定顺序相同。

通过DOM2级事件处理程序指定的方法，this也引用当前元素，如下：

        var div = document.getElementById("myDiv");
        div.addEventListener("click", function(event) {
            alert(this.id);
        }, false);

输出“myDiv”。

删除DOM2级事件处理程序，采用removeEventListener()，删除时传入的参数必须和绑定时传入的参数相同，不能传入匿名函数。如下所示：

        var div = document.getElementById("myDiv");
        var handler=function(event){
            alert("delete");
        };        
        div.addEventListener("click",handler,false);
        div.removeEventListener("click",handler,false);

IE事件处理程序

IE8和IE8以下的版本不支持addEventListener()，而是采用attachEvent()来实现事件绑定（attach：使依附，使附属）。目前只有IE和Opera支持attachEvent()。IE9支持addEventListener()，同时也兼容IE8的attachEvent()方法，但是IE9和IE8对attachEvent()的实现有点不同。如下所示：

        var div = document.getElementById("myDiv");
        div.attachEvent("onclick", function(event) {
            alert("1");
        });
        div.attachEvent("onclick", function(event) {
            alert("2");
        });

IE9和IE10先输出“1”，再输出“2”，而IE8和IE7先输出“2”，再输出“1”。

删除IE事件处理程序，采用detachEvent()，删除时传入的参数必须和绑定时传入的参数相同，不能传入匿名函数。如下所示：

        var div = document.getElementById("myDiv");
        var handler = function(event) {
            alert("delete");
        };
        div.attachEvent("onclick",handler);
        div.detachEvent("onclick",handler);

总结：attachEvent()采用冒泡方式，而addEventListener()可以采用冒泡或事件捕获方式。

先按由上往下的顺序执行事件捕获的执行程序，再执行目标元素的执行程序，最后按由下往上的顺序执行冒泡事件。代码如下所示：

    
        
        Event Bubbling Example
    
    
        #child {
            width: 100px;
            height: 100px;
            background-color: #FF0000;
        }
    
    
        

            

        
    
    
        var parent = document.getElementById("parent");
        var child = document.getElementById("child");
        child.onclick = function(event) {
            alert("child");
        };
        document.body.addEventListener("click", function(event) {
            alert("body:event bubble");
        }, false);
        parent.attachEvent("onclick", function(event) {
            alert("parent:event bubble");
        });
        document.body.addEventListener("click", function(event) {
            alert("body:event catch");
        }, true);
        parent.addEventListener("click", function(event) {
            alert("parent:event catch");
        }, true);
    

输出顺序：body:event catch—>parent:event catch—>child—>parent:event bubble—>body:event bubble