DOM中事件的三个阶段

DOM中事件有三个阶段，分别为

  1.事件冒泡阶段：当嵌套的元素注册相同的事件时，里面得元素触发了事件，外面的元素的事件也触发了。即执行顺序是从内向外。
  2.事件处于目标阶段
  3.事件捕获阶段：当嵌套的元素注册相同的事件时，里面得元素触发了事件，外面的元素的事件也触发了。但执行顺序是从外向内。
  其中：事件冒泡阶段和时间捕获阶段可以通过对象.addEventListener函数中的布尔值来定义，布尔值为true时为捕获阶段，布尔值为false时为冒泡阶段。默认为冒泡阶段

冒泡阶段

如下：
此时点击d3，执行顺序是d3，d2，d1。其中的e为事件处理参数对象，e.eventPhase获得的是元素处于哪一个阶段，1为事件捕获阶段，2为事件处于执行阶段，3为事件冒泡阶段

var objs = [document.getElementById("d1"),document.getElementById("d2"),document.getElementById("d3")];
//循环遍历div,foreach函数对数组的每一个元素执行一次提供的函数。提供的函数有三个参数,1.数组中正在处理的当前的元素
//2.数组中正在处理的当前元素的索引,3.foreach()正在处理的数组
 objs.forEach(function(element){
            element.addEventListener("click",function(){
               console.log(this.id+"---"+e.eventPhase);
            },false);
        }); 

执行结果：点击最里面的盒子时

捕获阶段

如下：
此时点击d3，执行顺序是d1，d2，d3。

 var objs = [document.getElementById("d1"),document.getElementById("d2"),document.getElementById("d3")];
        //循环遍历div,foreach函数对数组的每一个元素执行一次提供的函数。提供的函数有三个参数,1.数组中正在处理的当前的元素
        //2.数组中正在处理的当前元素的索引,3.foreach()正在处理的数组
        objs.forEach(function(element){
            element.addEventListener("click",function(e){
                console.log(this.id+"---"+e.eventPhase);
            },true);
        }); 

执行结果：点击最里面的盒子时

阻止事件冒泡

方法有两种：

1. 事假处理参数对象.stopPropagation();这个是火狐的标准，火狐和谷歌支持
2. window.event.cancleBubble = true;这个是IE的标准，IE和谷歌支持。window.evente等价于事假处理参数对象

 document.getElementById("d1").onclick = function(){
            console.log(this.id);
        }
        //这里的e为事件处理参数对象
        document.getElementById("d2").onclick = function(e){
            console.log(this.id);
            //阻止到这一层,即点击d3会出发到d2
            //window.event.cancelBubble = true; //IE的标准
            e.stopPropagation();//火狐的标准
        }
        document.getElementById("d3").onclick = function(){
            console.log(this.id);
        }