Js事件执行顺序，冒泡、捕获

1.Js事件执行满足“先绑定，先执行”的机制，如下：

HTML代码

	<div class="demo1">事件</div>

JS代码

	var demo1 = document.getElementsByClassName('demo1')[0];
	demo1.addEventListener('click', function () {
        console.log('我先绑定')
    });
    demo1.addEventListener('click', function () {
        console.log('我后绑定')
    });

结果：

交换JS绑定顺序

	var demo1 = document.getElementsByClassName('demo1')[0];
	demo1.addEventListener('click', function () {
        console.log('我后绑定')
    });
	demo1.addEventListener('click', function () {
        console.log('我先绑定')
    });    

结果：

2.事件冒泡
事件冒泡是自下向上或由内而外进行的，即某元素接收执行事件后，会发生事件传递，逐次向上或向外传递给自己的父元素，直到window停止。
示例：
HTML代码，三层div嵌套

<style>
    .demo1 {
        width: 300px;
        height: 300px;
        background-color: #f00;
    }

    .demo2 {
        width: 200px;
        height: 200px;
        background-color: #ff0;
    }

    .demo3 {
        width: 100px;
        height: 100px;
        background-color: #0f0;
    }
</style>
<div class="demo1">
    <div class="demo2">
        <div class="demo3"></div>
    </div>
</div>

JS代码

    demo1.addEventListener('click', function () {
        console.log('bubble demo1')
    }, false); // false表示冒泡
    demo2.addEventListener('click', function () {
        console.log('bubble demo2')
    }, false);
    demo3.addEventListener('click', function () {
        console.log('bubble demo3')
    }, false);
    window.addEventListener('click',function(){
        console.log('bubble window')
    }, false);

点击demo3时的执行结果（自下向上或由内而外，直到window）：

3.事件捕获
事件捕获与事件冒泡正好相反，它是自上向下或由外而内进行的，即从window开始，向触发事件的元素传递事件。
示例：
HTML代码沿用上面事件冒泡的。
JS代码

    demo1.addEventListener('click', function () {
        console.log('capture demo1')
    }, true); // true表示捕获
    demo2.addEventListener('click', function () {
        console.log('capture demo2')
    }, true);
    demo3.addEventListener('click', function () {
        console.log('capture demo3')
    }, true);
    window.addEventListener('click',function(){
        console.log('capture window')
    }, true);

点击最内层demo3的执行结果（从window开始，自上到下或由外而内）：
3.先捕获，后冒泡
事件捕获和冒泡的顺序是：先捕获后冒泡。
将上面示例的两个JS合到一起，点击内层demo3的执行结果（先捕获后冒泡）：