事件委托的实现_事件委托怎么实现-优快云博客

本文链接：https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120464184

本文探讨了事件委托的概念，其主要优点在于简化了对动态添加或删除元素的事件处理，通过监听父元素来响应子元素的事件。文章通过一个HTML示例展示了如何使用事件冒泡实现事件委托，并在JavaScript中添加事件监听器来捕获点击目标元素。此外，还提供了具体的代码实现，用于查找并打印被点击的子元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，为啥要事件委托？

答：监听父元素，对于子元素的增加于减少，对于整体事件流程没有影响。否者将在每个子元素产生的时候添加事件不仅麻烦且不可预知。

2，实现原理：

答：事件冒泡：

3，我的实现：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span{
            background-color: #00B7FF;
        }
        li{
            background: #00FFCC;
        }
    </style>
    <script>
        window.onload = function () {
            console.log(document.getElementsByClassName("bigbox"))
            document.getElementsByClassName("bigbox")[0].addEventListener("click",function (target) {
                console.log(target)
                let findObj = null;
                target.composedPath().some(ele=>{
                    if(ele.nodeName == "LI"){
                        return findObj = ele
                    }
                })
                if(findObj){
                    console.log("我发现那个元素",findObj)
                }
            })
        }
    </script>
</head>
<body>
    <ul class="bigbox">
      <li class="box box1"><span>box1</span></li>
      <li class="box box2"><span>box2</span></li>
      <li class="box box3"><span>box3</span></li>
      <li class="box4"><span>box4</span></li>
      <li class="box5"><span>box5</span></li>
    </ul>
</body>
</html>

4，其他实现

尚未发现较好的解决方案。