JavaScript 事件委托怎么用

你有没有遇到过这种情况？给网页上的按钮加点击事件时，明明只写了几个按钮的代码，后来新添的按钮却没反应？或者页面上有几十上百个同类元素，一个个加事件要写好多重复代码？这时候用JavaScript里的“事件委托”，就能轻松解决这些麻烦。

什么是事件委托？

先给你举个生活化的例子：你家小区要收快递，总不能让每个业主都跑到快递站盯着自己的包裹吧？小区物业派一个人在快递站守着，不管谁的快递到了，他都通知对应业主，这就相当于“事件委托”。

放到网页里，就是把原本要给每个子元素单独绑定的事件，交给它的父元素来“代管”。因为浏览器里的事件会“冒泡”——子元素触发事件后，会一层一层往上传给父元素、祖先元素，父元素就能通过这个“冒泡”知道“是哪个子元素触发的事件”，再对应处理。

为什么要用到它？

刚才说的两个常见场景，就是它的核心优势：

• 给新元素自动加事件：页面加载后动态添加的新元素（比如点击“添加商品”按钮新增的列表项），不用再单独写代码，父元素的委托事件会自动识别它，直接触发。
• 减少重复代码：比如有100个列表项，不用写100次事件绑定，只给父容器写一次就行，代码更简洁，加载也更快。

怎么用？手把手教你写代码

我们拿最常见的“列表点击”举例，一步步操作：

第一步：先写HTML结构

页面上有个装列表的父容器ul，里面现在有3个li列表项，后面还准备加新的：

`html

<!-- 父容器，用来委托事件 -->

• 商品1
• 商品2
• 商品3

<!-- 用来新增商品的按钮 -->

<button id="addBtn">添加新商品</button>

`

第二步：给父元素绑定“点击事件”（核心）

我们给ul加点击事件，然后判断“这次点击是不是来自列表项li”——如果是，就执行对应的逻辑：

`javascript

// 1. 获取父元素和新增按钮

const goodsList = document.getElementById('goodsList');

const addBtn = document.getElementById('addBtn');

// 2. 给父元素绑定点击事件（委托的核心）

goodsList.addEventListener('click', function(e) {

// e.target就是实际触发事件的子元素（点击的那个li）

if (e.target.tagName === 'LI') { // 判断是不是点击了li

alert('你点击了：' + e.target.textContent);

}

});

// 3. 测试动态加新元素

addBtn.addEventListener('click', function() {

const newLi = document.createElement('li');

newLi.textContent = '商品' + (goodsList.children.length + 1);

goodsList.appendChild(newLi); // 新li会自动有点击效果

});

`

第三步：注意避坑点

别搞错两个关键点，不然会失效：

• 要绑定在稳定的父元素上：不能选可能被删掉、替换的父容器，比如document是最外层的稳定元素，也可以用，但尽量选离子元素近的父容器，减少不必要的事件判断。
• 事件对象要对：e.target是实际点击的子元素，别写成this（this在委托函数里指父元素goodsList）。

总结一下

事件委托就是“找个靠谱的长辈代管晚辈的事”，既省代码，又能搞定动态新增的元素，是前端开发里常用的小技巧，遇到重复事件、动态元素的场景，不妨试试它。