事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。

addEventListener(type,fn,boolean)，第三个参数boolean，就是决定注册事件发生在捕 获阶段还是冒泡阶段，具体参考如下：

true : 捕获阶段

false : 冒泡阶段

默认为false

<div id="baba">
        <ul id="ul">
            <li id="li1">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <script>
        document.getElementById('baba').addEventListener('scroll', function () {
            console.log('scroll');
        }, false)
        // 发生事件冒泡，事件从内到外发生
        document.getElementById('baba').addEventListener('click', function (e) {
            console.log('baba被点击');
        })

        document.getElementById('ul').addEventListener('click', function () {
            console.log('ul被点击');
        }, true)
        document.getElementById('li1').addEventListener('click', function (e) {
            // 阻止事件冒泡
            e.stopPropagation()
            console.log('第一个li被点击');
        })

    </script>

li1的点击事件设置阻止了事件冒泡，但是，ul的事件注册在了捕获阶段，依然会被触发，而且是先出发了ul点击事件

 

当几个元素重合，事件先捕获(document—>目标节点)，后冒泡（目标节点—>document）。所以注册在捕获阶段的事件会先执行