JS事件委托

最新推荐文章于 2024-06-10 17:00:16 发布

豁达吃早餐的LLL.

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量232

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_57804294/article/details/130539525

版权

JavaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

事件委托是一种JavaScript技术，通过将事件监听器添加到父元素而不是每个子元素，利用事件冒泡来减少注册次数并提高程序性能。文章介绍了事件委托的概念，其优点在于减少内存消耗和提高处理大量元素的效率。示例展示了如何通过事件委托实现点击li元素变色，而不会影响其他非li元素。

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

前言

如果同时给多个元素注册事件，我们可以怎么做？
答案是：可以用 for 循环注册事件
例如：实现功能：点击每个小 li 当前的 li 变浅蓝色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for循环注册事件</title>
</head>
<body>
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li>第5个li</li>
    </ul>
    <script>
        // 点击每个小li 当前li变浅蓝色
        const lis = document.querySelectorAll('ul li')
        for(let i = 0 ; i<lis.length ; i++ ){
            lis[i].addEventListener('click', function(){
                lis[i].style.color = 'skyblue'
            })
        }
    </script>
</body>
</html>

运行结果图：这里点击了第一个和第三个。

在这里插入图片描述

for 循环注册事件是多次注册，有没有一种方法，只注册一次事件就可以完成需求呢。就是下面所说的方法：事件委托

1.事件委托是什么

事件委托事件委托会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。“委托” 简单理解就相当于学校发课本，是通过把书本委托给老师或者班长，再让老师或者班长发给每一位同学。这样提高了发课本的效率。类比于程序来说，提高了程序的性能。

2.事件委托的优点与原理

优点：减少注册次数，提高程序的性能
原理：事件委托是利用事件冒泡的特点。给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

3.事件委托的实现

拿文章开头的例子来说，点击每个小 li 当前的 li 变浅蓝色。
我们通过事件委托的方式，要先委托给父级，事件写到父级身上。
e.target 就是我们点击的那个对象。
但是我们只要点击 li 才会有效果，所以要 e.target.tagName === ’ LI ’ 才会有效果

<body>
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li>第5个li</li>
        <p>不变色</p>
    </ul>
    <script>
        // 目的：点击每个小 li 当前 li 变浅蓝色
        // 按照事件委托的方式。委托给父级，事件写到父级身上。
        const ul = document.querySelector('ul')  
        ul.addEventListener('click',function(e){
            // this.style.color = 'skyblue'   每个 li 都会变浅蓝色
            // e.target.style.color = 'skyblue'  点击 p 标签 p标签也会变色。
            if (e.target.tagName === 'LI'){
            //只有点击 li 才会有效果，点击 p 标签没有效果
                e.target.style.color = 'skyblue' 
            }
        })
    </script>
</body>