day22 事件委托

最新推荐文章于 2024-08-21 14:09:37 发布

亦昭昭

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量856

点赞数 25

分类专栏：记录前端学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/z240113765/article/details/135743837

版权

记录前端学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

本文详细介绍了事件委托的概念，如何利用事件冒泡减少注册次数，提升程序性能。通过JavaScript示例展示了如何在父元素上监听点击事件并根据目标元素类型（如LI）进行颜色更改，以避免全局样式影响。

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

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点：减少注册次数，提高程序性能
原理：事件委托其实是利用事件冒泡的特点
- 给父元素注册事件，当触发子元素时，会冒泡到父元素上，从而触发父元素的事件
实现：事件对象.target.tagName可以获得真正触发事件的元素

示例：

<script>
        // 点击每个小li，当前li文字变红色
        // 按照事件委托的方式，委托给父级
        // 1.获得父元素
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            alert(7)
            this.style.color = 'pink'//全部变色
            console.log(e.target)//即点击的对象
        })
        
    </script>

可以看到点击的对象是LI
在这里插入图片描述
于是可以改成 // e.target.style.color = 'pink'，点哪个哪个变色
但是这样的语句，即使不是li标签，是p标签也会变色，于是：

console.dir(e.target)，查看tagName
在这里插入图片描述

在这里插入图片描述
可以改成：

if (e.target.tagName === 'LI') {
                e.target.style.color = 'pink'//点哪个哪个变色，但仅限'li'标签
            }

最后的效果是，只有点击li标签的语句会变色
完整代码如下：

<script>
        // 点击每个小li，当前li文字变红色
        // 按照事件委托的方式，委托给父级
        // 1.获得父元素
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // alert(7)
            // this.style.color = 'pink'//全部变色
            // console.log(e.target)//即点击的对象
            // e.target.style.color = 'pink'//点哪个哪个变色
            // 只有点击li才有效果
            console.dir(e.target)
            if (e.target.tagName === 'LI') {
                e.target.style.color = 'pink'//点哪个哪个变色
            }

        })
    </script>