事件委托是将监听器挂于父容器、通过event.target判断操作子元素的实用技术，适用于可排序表格、可折叠树形菜单、声明式工具提示等高频场景。
事件委托不是抽象概念，是能立刻用在真实交互里的技术。核心就一条：把一个监听器挂在父容器上，靠 event.target 判断点击的是哪个子元素，再执行对应操作。下面几个典型项目，覆盖高频场景，代码简洁、逻辑清晰，适合动手练手。
可排序表格（点击表头按列排序）
目标：点击 <th> 时，按该列数据类型（<code>data-type="number" 或 data-type="string"）对整个表格重新排序。
- 监听器只挂载在
<table id="grid"> 上，不给每个 <code><th> 单独绑定<li>通过 <code>e.target.closest("th")精准捕获被点击的表头 - 读取
th.dataset.type决定用Number(a) - Number(b)还是a.localeCompare(b) - 提取所有
<tr>（跳过 <code><thead>），用 <code>Array.from()转成数组后排序，再批量重插到<tbody> <h3>可折叠树形菜单（点击标题展开/收起子列表）</h3> <p>目标：点击节点文字（如 “Animals”、“Mammals”）时，切换其下方嵌套的 <code><ul></ul>显隐状态。- 监听器统一挂在最外层
<ul class="tree" id="tree"></ul>上 - 必须先把裸文本节点包进
<span></span>或<button></button>，否则无法触发事件、也无法加样式 - 用
e.target.closest("li > span")定位点击的标题容器，再找它的下一个兄弟<ul></ul> - 避免误触：只响应直接点击标题元素，不响应点击
<li>的空白区域（padding/margin）
声明式工具提示（data-tooltip 行为）
目标：任意元素加上
data-tooltip="提示内容"，鼠标悬停时自动显示带定位的提示框。- 两个监听器都挂载在
document上：mouseover显示，mouseout隐藏 - 用
e.target.closest("[data-tooltip]")查找最近的带提示属性的祖先元素 - 提示框位置用
getBoundingClientRect()计算，保持与元素间距 5px、水平居中 - 智能翻转：若顶部空间不足（
rect.top ），自动显示在元素下方
动态待办清单（增删改 + 本地存储）
目标：支持添加、删除、切换完成状态，且新增的项也能响应事件，刷新不丢数据。
- 所有操作按钮（删除图标、复选框）的事件全部委托到
<ul id="toDoList"></ul>上 - 用
e.target.closest(".todoitem--delete")区分点击的是哪个删除按钮 - 删除时同步更新 DOM 和 JavaScript 数组（
arr.splice(index, 1)），保持视图与数据一致 - 利用
localStorage在每次变更后存一次，页面加载时读取并渲染
- 监听器统一挂在最外层
