事件委托
事件委托：利用事件冒泡，只在公共父元素上绑一个监听器，处理所有子元素的事件。加新列表项不用重新绑事件，内存与维护成本都低——做列表交互（删除、点赞、展开）的标配。
e.target 是真正被点的元素；判断它是不是目标子元素用 matches 或 closest。100 项的列表委托只需 1 个监听器，而不是 100 个。
- e.target：真正触发事件的元素（冒泡到父元素）
- closest("选择器")：找到最近匹配的祖先（含自己）
- 动态加的子元素自动可交互，无需重新绑定
HTML
<style> #todos { max-width: 340px; margin: 20px auto; list-style: none; padding: 0; } #todos li { padding: 10px 14px; background: #f6f8fa; border-radius: 8px; margin: 6px 0; cursor: pointer; transition: .2s; } #todos li.done { opacity: .4; text-decoration: line-through; } #todos li .del { float: right; color: #e5534b; font-weight: 700; } </style> <ul id="todos"> <li><span class="txt">学事件委托</span><span class="del">×</span></li> <li><span class="txt">写一个轮播</span><span class="del">×</span></li> <li><span class="txt">优化滚动性能</span><span class="del">×</span></li> </ul> <script> document.getElementById('todos').addEventListener('click', function (e) { var li = e.target.closest('li'); if (!li) return; if (e.target.closest('.del')) li.remove(); // 点 × 删除 else li.classList.toggle('done'); // 点其它位置完成 }); // 动态加一条：不用绑事件也能交互 var ul = document.getElementById('todos'); var add = document.createElement('li'); add.innerHTML = '<span class="txt">后来加的任务，同样可点</span><span class="del">×</span>'; ul.appendChild(add); </script>
本节要点事件委托 = 父元素一个监听器管所有子项；动态内容天然可交互。
