以前在学习JavaScript的事件流的时候，一直认为捕获与冒泡的作用不太大，所以仅仅只是了解了一下，并且还有些不太确定的理解，在上个星期的面试中，被考官问了一个在ul中给100个li添加事件，我竟然傻傻的循环遍历有所li。所以希望通过今天将知识总结一下，来巩固自身。
DOM事件流：事件流分为三个阶段： 事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件捕获阶段： 由根元素（由外向内）一直向内传递直到捕获到目标元素，截获事件。
处于目标阶段：实际目标接收事件。
事件冒泡阶段： 再由目标元素（由内向外）一直向外（直到根元素）传递事件。
接着请看代码：
var parent = document.getElementsByClassName('parent')[0];
var child = document.getElementsByClassName('child')[0];
parent.addEventListener('click', function (e) {
console.log('bubble')
},false)
parent.addEventListener('click', function (e) {
console.log('capture')
},true)
child.onclick = function (e) {
console.log(e.target.className)
}
<!-- html -->
<div class="parent">
<div class="child"></div>
</div>
在js文件中，我给parent添加了两个事件，一个会在冒泡阶段触发，一个会在捕获阶段触发。并且我是故意按照这样的顺序写的，在实际运行当中 编译器打印出的顺序 会是 ‘capture’、‘child’、‘bubble’的顺序。与上面DOM事件流所讲述的一致。
然后到上周面试的情况，给ul标签中的100个li标签添加点击事件。
我们给 parent 定义一个事件即可，
parent.addEventListener('click', function (e) {
var target = e.target
if(target.nodeName == 'LI'){
console.log('halo, im bubble'+ target.nodeName)
}
}, false)
这样，点击parent中任何一个li元素，通过冒泡到parent触发该事件。当前事件对象的target属性（e.target）就是我们当前点击的元素。
那可能有人问了，this、e.target、e.currentTarget 有什么区别。
e.target是事件触发的元素，我在上面提到了。
e.currentTarget 是绑定了该事件的元素，上面的事件是由parent绑定的。
this 表示执行的对象，也就是 parent
我们看看以下两者的关系，你大概就会明白了。
console.log(e.currentTarget=== this） // true 注意我用的是全等符号