浅谈事件委托

最新推荐文章于 2024-07-08 12:24:36 发布

$程

最新推荐文章于 2024-07-08 12:24:36 发布

阅读量450

点赞数 12

文章标签：前端 javascript

本文链接：https://blog.csdn.net/hometowna/article/details/139361013

版权

前言

把事件处理程序挂载在父节点上，利用事件冒泡机制在父节点统一处理事件

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
    <style>
        .item {
            cursor: pointer;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 5px;
        }
    </style>
    <script>
     
            const handleClick = function (event) {
                const target = event.target
                if(target.style.backgroundColor){
                    target.style.backgroundColor = ''

                }else{
                    target.style.backgroundColor = 'pink'

                }
            }
        
    </script>
</head>
<body>
    <ul id="list" onclick="handleClick(event)">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
        <!-- 很多子项 -->
    </ul>
</body>
</html>

item里面嵌入其他元素，点击内嵌元素，item要保持高亮怎么处理？

未处理效果：

解决👇：

closest方法返回最近的祖先元素，参数是选择器（selector）

    <script>
     
            const handleClick = function (event) {
                const item = event.target.closest('li')
                if(!item)return
                if(item.style.backgroundColor){
                  item.style.backgroundColor = ''

                }else{
                  item.style.backgroundColor = 'pink'

                }
            }
        
    </script>

效果：