给 100 个 li 各绑一个监听器既浪费又脆弱——新增的 li 没有事件。事件委托只在 ul 上绑一个监听器，用 event.target 判断真正被操作的子元素。新加的 li 天然被覆盖，顺带省下 99 个监听器。
委托的实现要点：用 e.target.matches(".del") 或 closest() 判断目标，注意 e.currentTarget 是绑定的元素、e.target 是真正触发的元素。取消冒泡（stopPropagation）会破坏委托，动态列表场景要小心。
<ul id="list"> <li>语文 <button class="del" data-id="1">删除</button></li> <li>数学 <button class="del" data-id="2">删除</button></li> </ul> <script> const list = document.getElementById('list'); // 委托：只绑 ul 一次，以后动态加 li 也自动生效 list.addEventListener('click', e => { const btn = e.target.closest('.del'); // 命中删除按钮 if (btn) btn.closest('li').remove(); }); // 动态新增的 li 无需再绑事件 list.insertAdjacentHTML('beforeend', '<li>英语 <button class="del">删除</button></li>'); </script>