事件传播机制-事件捕获-事件-冒泡-事件委托

2024-02-15 12:27:34

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .box{             box-sizing: border-box;             margin:20px auto;             padding-top: 20px;             width: 300px;             height: 300px;             background: lightblue;         }         .outer{             box-sizing: border-box;             margin: 0 auto;             padding-top: 20px;             width: 200px;             height: 200px;             background: lightcoral;         }         .inner{             margin: 0 auto;             width: 100px;             height: 100px;             background: lightgoldenrodyellow;         }     </style> </head> <body>     <div class="box">box         <div class="outer">outer             <div class="inner">inner</div>         </div>     </div>
    <script>         let box = document.querySelector('.box'),         outer = document.querySelector('.outer'),         inner = document.querySelector('.inner');
        /**          * DOM 0级绑定中给元素事件绑定的方法，都是在目标阶段 =》冒泡阶段触发的          * 从里往外  inner =》 outer => box         */         // inner.onclick = function(ev){         //     console.log('inner=>',ev);         // }
        // outer.onclick = function(ev){         //     console.log('outer=>',ev);         // }
        // box.onclick = function(ev){         //     console.log('box=>',ev);         // }
        // document.body.onclick = function(ev){         //     console.log('body=>',ev);         // }
                 /**          * DOM 2级绑定中给元素事件绑定的方法，都是在捕获阶段触发的          *    + 默认是 false 冒泡阶段触发从里往外  inner =》 outer => box          *    + 设置为true   捕获阶段触发从外往里  box   =》 outer => inner         */
        // inner.addEventListener('click',function(ev){         //     console.log('inner=>',ev);         // },true)
        // outer.addEventListener('click',function(ev){         //     console.log('outer=>',ev);         // },true)
        // box.addEventListener('click',function(ev){         //     console.log('box=>',ev);         // },true)

        // inner.onclick = function(ev){         //     //阻止冒泡         //     // ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble();         //     ev.stopPropagation();         //     console.log('inner=>',ev);         // }
        // outer.onclick = function(ev){         //     ev.stopPropagation();         //     console.log('outer=>',ev);         // }
        // box.onclick = function(ev){         //     ev.stopPropagation();         //     console.log('box=>',ev);         // }
        // document.body.onclick = function(ev){         //     ev.stopPropagation();         //     console.log('body=>',ev);         // }

        // --------------------------------------------------         /**          * 因为点击事件行为存在冒泡传播机制，所以不论点击  box、outer、inner，最后都会          * 传递到 body 上, 触发body的 click 点击事件行为,把为其绑定的方法执行          *            *   在方法执行接收到的事件对象中，有一个 target/srcElement属性(事件源),可以知道当前点击的是谁,此时          *    方法中可以根据事件源的不同，做不同的处理          *     这就是 “事件委托/事件代理”: 利用事件的冒泡传播机制，可以把一个容器中所有后代元素的某个          *      事件行为触发要做的操作，委托给当前容器的某个事件行为,后期只要触发任意后代元素，在方法执行的时候，          *      基于事件源做不同的处理          *      + 性能高          *      + 可以操作动态绑定的元素          *      + 某些需求必须基于它完成          *      + ...          * */          document.body.onclick = function(ev){             // console.log(ev);             let target = ev.target,                 tgrgetClass = target.className;             // console.log(tgrgetClass); // inner             if(tgrgetClass === "inner"){                 console.log('inner');                 return;             }else if(tgrgetClass === "outer"){                 console.log('outer');                 return;             }else if(tgrgetClass === "box"){                 console.log('box');                 return;             }          }
    </script> </body> </html>

码农公寓

相关文章