JavaScript-185：dom事件三个阶段

dom 事件流 三个阶段

1 JS 代码中只能执行捕获或者冒泡其中的一个阶段
2 onclick 和 attachEvent(ie) 只能得到冒泡阶段
3 捕获阶段 如过addEventListener 第三个参数是true 那么则处于捕获阶段 document -> html -> body -> father

结构

    <div class="father">
        <div class="son"></div>
    </div>

CSS

        .father {
            padding: 30px;
            margin: 0 auto;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .son {

            width: 100px;
            height: 100px;
            background-color: red;
        }

JS

        // dom 事件流 三个阶段
        // 1 JS 代码中只能执行捕获或者冒泡其中的一个阶段
        // 2 onclick 和 attachEvent(ie) 只能得到冒泡阶段
        // 3 捕获阶段 如过addEventListener 第三个参数是true 那么则处于捕获阶段 document -> html -> body -> father
        var son = document.querySelector('.son');
        son.addEventListener('click', function ()
        {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function ()
        {
            alert('father')
        }, true)
        // 4 冒泡阶段 如果addEventListener 第三个参数是false 或者 省略 那么处于冒泡阶段
        // father -> body -> html -> document
        son.addEventListener('click', function ()
        {
            alert('son');
        }, false);
        father.addEventListener('click', function ()
        {
            alert('father')
        }, false);
        document.addEventListener('click', function ()
        {
            alert('document');
        })