[JavaScript篇] 一文彻底弄懂事件委托（事件代理）

什么是事件委托？

事件委托也称之为事件代理（Event Delegation）。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

先看一个示例：

例1.1设置一个无序列表ul,含有多个li标签，点击任意一个li标签，li标签就会变红

<body>
    <ul id="list">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

    <script>
        var ul_list = document.getElementById('list');
        var lis = ul_list.getElementsByTagName('li');

        for (var i = 0; i < lis.length; i++) {
    
    
            lis[i].onclick = function () {
    
    
                this.style.color = 'blue';
            };
        }
    </script>
</body>

在这里插入图片描述
但是！批量添加事件监听会造成大量内存占用！

为什么要使用事件委托？

如例1.1，实际工作中，往往会碰到需要大量事件处理函数的场景，此时如果一个一个添加事件处理函数，过于低效，代码十分笨重，并且批量添加事件会导致监听数量太多，造成大量内存消耗。每个事件处理函数都是一个单独的引用类型，这些函数本身也会占用内存。此时，如果有一种方法可以做到既不占用内存，又能拥有大量的事件处理函数是最好的方法！

引入

新增动态绑定事件

下面我们一起来思考这样一个题目：

动态绑定事件：
例1.2给出一个无序列表，内部没有 li 标签，设计一个按钮，可以生成 li 标签，并且每此生成的li标签都能有一个点击字体变色的功能，给你1分钟来思考这个问题。

代码实现如下：

<body>
    <button id="btn">点击添加li标签</button>
    <ul id="list">
    </ul>

    <script>
        var ul_list = document.getElementById('list');
        var btn = document.getElementById('btn');

        btn.onclick = function () {
    
    
            var new_li = document.createElement('li'); //新增节点
            new_li.innerHTML = '列表项';
            ul_list.appendChild(new_li); //孤儿节点上树
            new_li.onclick = function () {
    
    
                this.style.color = 'blue';
            }
        }
    </script>
</body>

如图，每次点击添加后，都能得到一个自带事件处理函数的li标签，我们称这种现象为：动态绑定事件。

在这里插入图片描述

事件委托

由此，我们正式介绍事件委托，事件委托是利用事件的冒泡原理来实现的，事件从最内层的节点开始，然后逐步向上传播事件，

举个例子：页面上有这么一个节点树，div>ul>li;比如给最里面的li加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li做点击事件的时候，都会冒泡到最外层的div上。

因此我们可以委托它们父级代为执行事件。

<body>
    <button id="btn">点击新增li标签</button>
    <ul id="list">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    
    <script>
        var list = document.getElementById('list');
        var btn = document.getElementById('btn');

        list.onclick = function(e){
    
    
            //点击的子元素
            e.target.style.color = 'blue';
        }

        btn.onclick = function(){
    
    
            var new_li = document.createElement('li'); //创建新节点
            new_li.innerHTML = '新增列表项';//写入内容
            list.appendChild(new_li);//孤儿节点上树

        }
    </script>
</body>

在这里插入图片描述

优势：

当大量类似元素需要批量添加事件监听时，使用事件委托，可以极大程度的避免资源浪费
当动态元素节点上树后，使用事件委托，也能让新上树的元素具有事件监听

结尾

事件委托相比知识点，其实更像是我们的一个工具，一个合格的程序员必须要会的工具！
如果本文对你有所帮助，点赞关注支持一下吧！

日期：2022.5.10
作者：胜利111