JS目标冒泡捕获

目标:这里的目标就是事件源,传播时,会从目标传播到父级,body,html,document,window

window 默认的传播方式为冒泡

冒泡:事件传播时,从目标开始传播,一直到父级,body…window

捕获:从最顶层开始,逐层向下传递,一直到目标,就不会再往下传递了

冒泡

    <style>
        #box1 {
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        #box2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>


     <div id="box1">
        <div id="box2"></div>
    </div>
    <script>
        var box1 = document.getElementById('box1')
        var box2 = document.getElementById('box2')
        var myBody = document.body

        box1.onclick = function (e) {
            console.log('触发了 box1 的点击事件')
        }
        *点击box1,打印结果为:触发box1和触发body
        
        box2.onclick = function () {
            console.log('触发了 box2 的点击事件')
        }
        *点击box2,打印结果为:触发box2,触发box1,触发body
        
        myBody.onclick = function () {
            console.log('触发了 body 的点击事件')
        }
        *点击body ,打印结果为:触发body
    </script>

捕获

    <style>
        #box1 {
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        #box2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>


     <div id="box1">
        <div id="box2"></div>
    </div>
    <script>
        var box1 = document.getElementById('box1')
        var box2 = document.getElementById('box2')
        var myBody = document.body

       *  捕获,需要传递第三个参数为true
       *  addEventListener 第三个参数默认值为 false 代表传播方式为冒泡
       *  如果想改变传播方式为捕获, 那么需要将第三个参数传递为true
       
        box1.addEventListener('click', function () {
            console.log('触发了 box1 的点击事件')
        }, true)
        *点击box1,打印结果为:触发body和触发box1
        
        box2.addEventListener('click', function () {
            console.log('触发了 box2222 的点击事件')
        }, true)
        *点击box2,打印结果为:触发body,触发box1,触发box2
        
        myBody.addEventListener('click', function () {
            console.log('触发了 body 的点击事件')
        }, true)
        *点击body ,打印结果为:触发body
    </script>