当前位置：首页 > 学习提升 > javascript > 正文内容

请解释什么是事件委托/事件代理

自由小鸟2年前 (2023-01-03)javascript1231

什么是事件委托

事件委托也称之为事件代理（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>

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

举个例子：页面上有这么一个节点树，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>

```