7.3 事件冒泡

使用事件冒泡时，子元素先触发，父元素再触发

<div id="box">
        <p id="pp">
            <button id="btn">事件源</button>
        </p>
    </div>
    <script>
        var $box = document.querySelector('#box')
        var $pp = document.querySelector('#pp')
        var $btn = document.querySelector('#btn')
        //false表示在冒泡阶段触发，true表示在捕获阶段触发
        $box.addEventListener('click', function () {
            console.log('div监听到了事件');
        }, false)
        $pp.addEventListener('click', function () {
            console.log('pp监听到了事件');
        }, false)
        $btn.addEventListener('click', function () {
            console.log('button监听到了事件');
        }, false)
    </script>