day22 事件委托

事件委托

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

优点：减少注册次数，提高程序性能
原理：事件委托其实是利用事件冒泡的特点
- 给父元素注册事件，当触发子元素时，会冒泡到父元素上，从而触发父元素的事件
实现：事件对象.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>