JavaScript-事件委托

最新推荐文章于 2024-08-18 10:54:05 发布

新54

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量105

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_61897768/article/details/138141340

版权

本文介绍了如何使用JavaScript的事件委托机制，为HTML中的ul元素添加点击事件监听器，以便在点击任意li元素时，仅更改该li的样式为红色，从而提高程序性能并减少事件处理函数的注册次数。

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

ul里创建6个li，点击哪个li，哪个li变色。按照事件委托的方式，委托父级。

首先创建好格式，第一步都是DOM获取父级ul元素。

然后给ul添加监听事件，点击父级元素里的内容。当target.tagName与li相同，

则更改新的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>

</head>
<body>
<ul>
    <li>第一个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <li>第4个孩子</li>
    <li>第5个孩子</li>
</ul>
<p>我不需要变色</p>
<script>
    //需求点击每个小li，当前li变为红色
    //按照事件委托的方式，委托给父级，事件写到父级身上
    //获得父元素
    const ul = document.querySelector('ul')
    ul.addEventListener('click',(e) => {
        // e.target.style.color = 'red'

        //需求，只要点击li才会有效果
        if(e.target.tagName === 'LI'){
            e.target.style.color = 'red'
        }
    })
//事件委托好处     减少注册次数，提高程序性能
    //事件委托委托给了谁？   父元素
    // 如何找到真正出发的元素    格式：事件对象.target.tagName

</script>
</body>
</html>

新54

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript-事件委托

然后给ul添加监听事件，点击父级元素里的内容。当target.tagName与li相同，ul里创建6个li，点击哪个li，哪个li变色。按照事件委托的方式，委托父级。首先创建好格式，第一步都是DOM获取父级ul元素。
复制链接

扫一扫