DOM事件流: 事件捕获 处于目标 事件冒泡

以前在学习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=