事件委托是将监听器挂于父容器、通过event.target判断操作子元素的实用技术，适用于可排序表格、可折叠树形菜单、声明式工具提示等高频场景。

事件委托不是抽象概念，是能立刻用在真实交互里的技术。核心就一条：把一个监听器挂在父容器上，靠 event.target 判断点击的是哪个子元素，再执行对应操作。下面几个典型项目，覆盖高频场景，代码简洁、逻辑清晰，适合动手练手。

可排序表格（点击表头按列排序）

目标：点击 时，按该列数据类型（data-type="number" 或 data-type="string"）对整个表格重新排序。

• 监听器只挂载在 上，不给每个 （跳过 ），用 Array.from() 转成数组后排序，再批量重插到

  可折叠树形菜单（点击标题展开/收起子列表）

  目标：点击节点文字（如 “Animals”、“Mammals”）时，切换其下方嵌套的

  显隐状态。
  • 监听器统一挂在最外层
    上
  • 必须先把裸文本节点包进 或 ，否则无法触发事件、也无法加样式
  • 用 e.target.closest("li > span") 定位点击的标题容器，再找它的下一个兄弟
  • 避免误触：只响应直接点击标题元素，不响应点击
  • 的空白区域（padding/margin）

  声明式工具提示（data-tooltip 行为）

  目标：任意元素加上 data-tooltip="提示内容"，鼠标悬停时自动显示带定位的提示框。

  

  Expanso yaml-to-json

  使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

  下载
  • 两个监听器都挂载在 document 上：mouseover 显示，mouseout 隐藏
  • 用 e.target.closest("[data-tooltip]") 查找最近的带提示属性的祖先元素
  • 提示框位置用 getBoundingClientRect() 计算，保持与元素间距 5px、水平居中
  • 智能翻转：若顶部空间不足（rect.top ），自动显示在元素下方

  动态待办清单（增删改 + 本地存储）

  目标：支持添加、删除、切换完成状态，且新增的项也能响应事件，刷新不丢数据。

  • 所有操作按钮（删除图标、复选框）的事件全部委托到
    上
  • 用 e.target.closest(".todoitem--delete") 区分点击的是哪个删除按钮
  • 删除时同步更新 DOM 和 JavaScript 数组（arr.splice(index, 1)），保持视图与数据一致
  • 利用 localStorage 在每次变更后存一次，页面加载时读取并渲染
  单独绑定

  通过 e.target.closest("th") 精准捕获被点击的表头

  读取 th.dataset.type 决定用 Number(a) - Number(b) 还是 a.localeCompare(b)

  提取所有