js事件流

事件流一共由三个阶段分别是：
1.捕获阶段
2.目标阶段
3.冒泡阶段

事件绑定大家都知道，有DOM0级（on+事件类型）和DOM2级（addEventListener）

DOM0级

<div id="box1"></div>
box1.onclick = function(){
	console.log('box1');
}

输出了box1。再来看下面代码

<div id="box1"></div>
box1.onclick = function(){
	console.log('box1');
}
box1.onclick = function(){
	console.log('box1 two');
}

输出了box1 two,因为DOM0级会覆盖掉之前在同一元素上面的绑定，再来看一下。

    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        box1.onclick = function() {
            console.log('box1');
        }
        box2.onclick = function() {
            console.log('box2');
        }
        box3.onclick = function() {
            console.log('box3');
        }
    </script>

当我们点击box1时都知道输出box1，可是当我们点击box3时弹出什么呢？

点击box3会弹出其他的是因为事件冒泡。

这就叫做事件冒泡，一级一级往上冒直到window

DOM2级

 <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        box1.addEventListener('click', function() {
            console.log('box1');
        }, false);
        box2.addEventListener('click', function() {
            console.log('box2');
        }, false);
        box3.addEventListener('click', function() {
            console.log('box3');
        }, false);
    </script>

输出跟上面是一样的，因为我们绑定在了冒泡阶段。（true捕获，false冒泡）
再来看看捕获阶段是怎么样的

    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        box1.addEventListener('click', function() {
            console.log('box1');
        }, true);
        box2.addEventListener('click', function() {
            console.log('box2');
        }, true);
        box3.addEventListener('click', function() {
            console.log('box3');
        }, true);
    </script>

点击box可以看到

相比之前 现在顺序反过来了，是因为事件捕获

这就是捕获阶段，跟冒泡阶段完全相反。

那冒泡跟捕获的执行顺序是什么样的呢？我分别在每一个元素上绑定了两个阶段的同一事件，来看看触发的顺序。

<div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        box1.addEventListener('click', function() {
            console.log('box1 捕获阶段');
        }, true);
        box2.addEventListener('click', function() {
            console.log('box2 捕获阶段');
        }, true);
        box3.addEventListener('click', function() {
            console.log('box3 捕获阶段');
        }, true);
        box1.addEventListener('click', function() {
            console.log('box1 冒泡阶段');
        }, false);
        box2.addEventListener('click', function() {
            console.log('box2 冒泡阶段');
        }, false);
        box3.addEventListener('click', function() {
            console.log('box3 冒泡阶段');
        }, false);

点击box3看到，先捕获后冒泡。

也不是都是这样

box1.addEventListener('click', function(){
	console.log('box1 捕获阶段');
},true);
box2.addEventListener('click', function(){
	console.log('box2 捕获阶段');
},true);
box1.addEventListener('click', function(){
	console.log('box1 冒泡阶段');
},false);
box2.addEventListener('click', function(){
	console.log('box2 冒泡阶段');
},false);
box3.addEventListener('click', function(){
	console.log('box3 冒泡阶段');
},false);
box3.addEventListener('click', function(){
	console.log('box3 捕获阶段');
},true);  // 将box3的捕获阶段放到box3的冒泡阶段后面

用图来看一下。