一：概念

• 事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。

• 事件冒泡刚好相反，是从触发事件的那个节点一直到document，是自下而上的去触发事件。

• 事件委托：利用了事件冒泡的原理，在下方通过实例讲解

• 阻止事件委托和冒泡：在事件函数中执行event.stopPropagation()

  补充：绑定事件方法（addEventListener）的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。所以当你对一个dom节点触发事件时，若外层的节点也设置了相应的事件函数，就会使外层的节点也触发自己的事件函数。

  光看概念，好像明白了，但是在实例中仍然可能判断错误，有可能你的理解就是错误的，所以最好自己通过实例测试一下

二：实例讲解

事件冒泡和时间捕捉：

1
2
3
4
5
6
7
8
9
10
11
12

<div id="parent">
　　<div id="child" class="child"></div>
</div>

<script type="text/javascript">
       document.getElementById("parent").addEventListener("click",function(e){
            console.log("parent事件被触发，"+this.id);
        },false);
        document.getElementById("child").addEventListener("click",function(e){
            console.log("child事件被触发，"+this.id);
        },false);
</script>123456789101112

上述代码给child和parent元素都设置了点击事件，并且都是采用的事件冒泡机制。
1.当点击child元素时，先触发child的点击事件，再触发parent的点击事件，打印相应的内容；
2.当点击parent元素时，只触发parent的点击事件，因为parent元素冒泡上去没有dom元素设置了click事件的函数；

1
2
3
4
5
6
7
8
9
10
11
12

<div id="parent">
　　<div id="child" class="child"></div>
</div>

<script type="text/javascript">
       document.getElementById("parent").addEventListener("click",function(e){
            console.log("parent事件被触发，"+this.id);
        },true);
        document.getElementById("child").addEventListener("click",function(e){
            console.log("child事件被触发，"+this.id);
        },true);
</script>123456789101112

上述代码采用事件捕捉
1.当点击child元素时，先触发parent的点击事件，再触发child的点击事件，打印相应的内容；
2.当点击parent元素时，只触发parent的点击事件，因为parent元素从上面捕捉下来一直到parent元素没有dom元素设置了click事件的函数；

总结：所以当点击child元素时，不论是设置的事件捕捉还是事件冒泡，都会触发parent的点击事件，除非不给parent元素设置点击事件；

事件委托：

当有多个类似的元素需要绑定事件时，一个一个去绑定即浪费时间，又不利于性能，这时候就可以用到事件委托，给他们的一个共同父级元素添加一个事件函数去处理他们所有的事件情况，根据下面代码分析;

1
2
3
4
5
6
7
8
9
10
11
12

<ul id="1ist">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

<script type="text/javascript">
    document.getElementById('1ist').addEventListener('click',function(e){
    e.target.innerHTML = "被点击";
  });
</script>123456789101112

可能大家会疑惑，我们并没有给li分别设置点击函数，为什么点击相应的li却会产生效果，我们可以这么理解，虽然我们没有给li设置点击事件，但是默认的点击事件是采用的事件冒泡，冒泡到父级元素的点击事件是，用事件的target属性判断进行点击的元素

• e.target表示在事件冒泡中触发事件的源元素，在IE中是e.srcElement

• 并且e.target有很多属性可以操作

​

• event.target.nodeName 　　//获取事件触发元素标签name（li,p…）
• event.target.id　　　　　　//获取事件触发元素id
• event.target.className　　//获取事件触发元素classname
• event.target.innerHTML　　//获取事件触发元素的内容（li）

然后进行相应操作~~这是我自己理解的。。。如果有错误的地方，欢迎在评论中告知(经测试，子元素没有定义事件函数时，仍然会进行冒泡，触发父元素的事件函数，并且冒泡和捕捉时，只有相对应 的事件会被触发，其他不被触发)

最后展示下e.stopPropagation()的兼容写法（兼容IE）

1
2
3
4
5
6
7

function stopPropagation(e) {  
    if (e.stopPropagation) {  
        e.stopPropagation();  
    } else {  
        window.event.cancelBubble = true;  
    }  
}