事件三个阶段06

<div id="box">
    <input type="button" value="点我" id="btn" />
    <div id="son"></div>
</div>

<script>
    /* 
    1.事件冒泡：如果一个元素的事件被触发，该元素的所有父级元素 同名事件都会被依次触发
        * 子元素 -> 父元素 -> body -> html -> document -> window
    
    2.事件捕获：如果一个元素事件被触发， 会先从最顶级的父元素 依次 往子元素触发 
        * window -> document -> html -> bdoy -> 父元素 -> 子元素
    
    3.事件三个阶段 ： e.eventPhase
        (1) 事件捕获
        (2) 事件目标  （触发事件的元素）
        (3) 事件冒泡
     */

    var box = document.querySelector('#box');//父盒子
    var btn = document.querySelector('#btn');//小按钮
    var son = document.querySelector('#son');//绿色盒子

    //子元素注册事件
    btn.addEventListener('click', function (e) {
        alert('我是小按钮' + e.eventPhase);
    }, false);//冒泡


    //父元素注册事件

    box.addEventListener('click', function (e) {
        alert('我是骚粉的大盒子' + e.eventPhase);
    }, false);

    //body
    document.body.addEventListener('click', function (e) {
        //IE8事件对象
        e = e || window.event;
        alert('我是body' + e.eventPhase)
        //谷歌火狐
        //e.stopPropagation();
        //IE8
        // e.cancelBubble = true;
    }, false);

    //html
    document.documentElement.addEventListener('click', function (e) {
        alert('我是html' + e.eventPhase)
    }, false);

    //document
    document.addEventListener('click', function (e) {
        alert('我是document' + e.eventPhase)
    }, true);//捕获

    //window
    window.addEventListener('click', function (e) {
        alert('我是window' + e.eventPhase)
    }, true);//捕获

</script>