事件传播捕获 阻止事件传播 事件委托

事件传播(冒泡传播)

    冒泡: 事件传播时, 从目标开始传播, 一直到到父级, body...window
    目标: 目标就是事件源
    传播时 会从目标传播到父级, body, html, document, window
    window 默认的传播方式为 冒泡
    
    

/*   css
        #box1 {
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        #box2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
*/
/* html
    <div id="box1">
        <div id="box2"></div>
    </div>
*/
        var box1 = document.getElementById('box1')
        var box2 = document.getElementById('box2')
        var myBody = document.body

        box1.onclick = function (e) {
            console.log('触发了 box1 的点击事件')
        }
        box2.onclick = function () {
            console.log('触发了 box2 的点击事件')
        }
        myBody.onclick = function () {
            console.log('触发了 body 的点击事件')
        }
        
        /*
         点击body 时 只会触发body
        点击box1 时 会触发box1 body 
        点击box2 时 会触发box2 box1 body
        */

目标捕获

     捕获 需要 传递 第三个参数 为 true
     addEventListener 第三个参数 默认值 为 false 代表传播方式 为 冒泡
     如果想改变传播方式为 捕获, 那么需要 将第三个参数传递为 true

        box1.addEventListener('click', function () {
            console.log('触发了 box1 的点击事件')
        }, true)
        box2.addEventListener('click', function () {
            console.log('触发了 box2 的点击事件')
        }, true)
        myBody.addEventListener('click', function () {
            console.log('触发了 body 的点击事件')
        }, true)

        /*
        点击body 时 只会触发body
        点击box1 时 会触发 body box1
        点击box2 时 会触发 body box1 box2
        */

阻止事件传播

阻止事件传播: e.stopPropagation()

       var box1 = document.getElementById('box1');
       var box2 = document.getElementById('box2');
       var body = document.body;

       box1.onclick = function(e){  // 点击box1时 body的点击事件不会会触发
        e.stopPropagation();  // 阻止box1 不再传播  => 传到到box1就结束了
        console.log('box1的点击事件');
       }
       box2.onclick = function(){
        console.log('box2的点击事件');   // 父级没有点击事件  也会将事件传播给父级的父级
       }
       body.onclick = function(){
        console.log('body的点击事件');
       }

事件委托

     事件委托：
         因为事件冒泡的存在, 所以点击子元素时, 一定会触发给父级
         所以可以将 子元素统一的事件, 都提交给 父级
         e.target: 触发事件的事件源
     总结:
         为什么要用事件委托
         动态的添加了 li 时, 新加的li没有绑定上事件, 需要动态添加完成后重新绑定事件, 这样操作比较麻烦
         所以此时可以利用 事件委托
         li 的点击事件必须委托给父级的 点击事件