事件流简介 --- 事件流描述的是从页面中接受事件的顺序

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

    .a p {
        width: 200px;
        height: 200px;
        background-color: #000;
    }

    .a p span {
        width: 100px;
        height: 100px;
        display: block;
        background-color: pink;
    }
</style>

<div class="a">
    <p>
        <span></span>
    </p>
</div>


<script>
    //   实现事件捕获的方式
    //      addEventListener(type , fn , true) 第三个参数表示是否支持事件捕获

    // 事件流：
    //   事件冒泡：从里向外  //false  默认值
    //   事件捕获：从外向内  //true  捕获
    //   主要使用事件冒泡



    // 什么是事件流：事件流描述的是从页面中接受事件的顺序

    // 但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)

    // 事件捕获：事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件

    // 事件冒泡：IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点


    // IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

    // 事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段



    var oDiv = document.querySelector('.a')
    var oP = document.querySelector('p');
    var oSpan = document.querySelector('span')


    // 默认是事件冒泡 --- 从里向外
    // oDiv.addEventListener( 'click' , function () {  
    //     console.log('我是最外面的');
    // })

    // oP.addEventListener( 'click' , function () {  
    //     console.log('我是中间的');
    // })

    // oSpan.addEventListener( 'click' , function () {  
    //     console.log('我是最里面的');
    // })


    // 事件捕获 --- 从外向内
    oDiv.addEventListener('click', function () {
        console.log('我是最外面的');
    }, true)

    oP.addEventListener('click', function () {
        console.log('我是中间的');
    }, true)

    oSpan.addEventListener('click', function () {
        console.log('我是最里面的');
    }, true)
</script>