网站导航
> 文档中心 > [JavaScript篇] 一文彻底弄懂事件委托（事件代理）

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

网友: 文档中心 2022-05-10 11:27:39

什么是事件委托？

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

[JavaScript篇] 一文彻底弄懂事件委托（事件代理）
批量添加事件监听会造成大量内存占用！

为什么要使用事件委托？

如例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标签，我们称这种现象为：动态绑定事件。

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

事件委托

由此，我们正式介绍事件委托，事件委托是利用事件的冒泡原理来实现的，事件从最内层的节点开始，然后逐步向上传播事件，
举个例子：页面上有这么一个节点树，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>

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

优势：

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

结尾

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

日期：2022.5.10
作者：胜利111

网络标签：

相关问题