事件 —【事件的捕获与冒泡】

当你点击了一个事件的时候，系统会先从最外层进行捕获事件到此最深层的事件源，然后在从事件源冒泡到最外层的document。

简单的一个例子，认清事件的执行顺序：

注意IE8和Opera老版本仅支持冒泡事件，不支持捕获事件

<div class="box">
    <div class="box1"></div>
</div>

父元素和子元素都是捕获事件的时候: 结果为1,2
var box =document.getElementsByClassName('box')[0];
var box1 =document.getElementsByClassName('box1')[0];
box.addEventListener('click',function(){
    console.log(1);;
},true)
box1.addEventListener('click',function(){
    console.log(2);
},true)

父元素和子元素都是冒泡事件的时候: 结果为2,1
var box =document.getElementsByClassName('box')[0];
var box1 =document.getElementsByClassName('box1')[0];
box.addEventListener('click',function(){
    console.log(1);;
},false)
box1.addEventListener('click',function(){
    console.log(2);
},false)

父元素为捕获,子元素为冒泡的时候:返回1,2
var box =document.getElementsByClassName('box')[0];
var box1 =document.getElementsByClassName('box1')[0];
box.addEventListener('click',function(){
    console.log(1);;
},true)
box1.addEventListener('click',function(){
    console.log(2);
},false)

父元素为冒泡,子元素为捕获的时候:返回2,1
var box =document.getElementsByClassName('box')[0];
var box1 =document.getElementsByClassName('box1')[0];
box.addEventListener('click',function(){
    console.log(1);;
},false)
box1.addEventListener('click',function(){
    console.log(2);
},true)

事件 —【事件的捕获与冒泡】