DOM 事件流与事件委托_let big = document.queryselector('.big');-CSDN博客

本文链接：https://blog.csdn.net/qq_34870529/article/details/120653355

这篇博客详细介绍了DOM事件流的两种模式——事件捕获和事件冒泡，通过实例展示了事件如何从外到内及由内到外传递。同时，文章探讨了事件委托的概念，利用一个列表元素移除的例子解释了如何通过将事件处理程序附加到父元素来提高性能。此外，还提供了相关的HTML和JavaScript代码示例。

摘要由CSDN通过智能技术生成

<!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>Dom事件流与事件委托</title>
    <style>
        .big {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .center {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .small {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="center">
            <div class="small"></div>
        </div>
    </div>
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>鸭梨</li>
    </ul>
    <script>
        /** 事件流 -----> 事件捕获：由外到内   事件冒泡：由内到外  **/
        let big = document.querySelector('.big');
        let center = document.querySelector('.center');
        let small = document.querySelector('.small');

        big.onclick = function (e) {
            console.log(this);
            console.log(e.target);
        }

        center.onclick = function (e) {
            console.log(this);
            console.log(e.target);
        }

        small.onclick = function (e) {
            console.log(this);
            console.log(e.target);
        }

        // 实现功能：将点击的li移除 --- li添加事件 消耗性能
        let li = document.querySelectorAll('li');
        let ul = document.querySelector('ul');
        for (let i = 0; i < li.length; i++) {
            li[i].onclick = function () {
                ul.removeChild(li[i]);
            }
        }

        // 事件委托：将li的事件委托给ul
        ul.onclick = function (e) {
            console.log(e);
            ul.removeChild(e.target);
        }
    </script>
</body>

</html>