事件委托在树形菜单中通过父容器统一监听子节点交互，聚焦折叠/展开、复选框、文本点击三类操作；依赖data属性标识结构，一次绑定分发处理，兼顾父子状态同步与性能优化。
事件委托在树形菜单中非常实用，它让父容器统一监听子节点的交互，避免为每个节点单独绑定事件，尤其适合动态增删节点或深层嵌套的 Tree 组件。关键不是“代理一整套”，而是抓住三个核心操作的共性：点击折叠/展开图标、点击复选框、点击菜单项文本（可能触发选中或展开）。只要结构语义清晰、事件目标可识别，一套委托就能覆盖全部。
结构设计是前提：用 data 属性标记节点类型与状态
Tree 节点 HTML 必须具备可预测的结构和标识，否则委托无法精准响应。推荐用 data-role 区分功能区域，用 data-id 和 data-parent-id 支持逻辑定位：
- 折叠按钮：`▶`
- 复选框：``
-
节点内容区（点击可选中）：`文档管理`
-
节点容器需有唯一 class 或 role：如 `
- `，方便向上查找上下文
一次委托监听，分发处理三类操作
在 Tree 根容器（如 `
`）上绑定一个 click 事件，通过 event.target 判断点击位置，再按角色分发逻辑：
- 若 `target.dataset.role === 'toggle'` → 找到对应节点 DOM，切换其子级 `
- ` 的显隐，并更新图标文本（▶/▼）和 `aria-expanded` 属性
- 若 `target.dataset.role === 'check'` → 获取 `target.checked` 状态，调用递归方法同步更新子节点（全选/半选/取消），再向上更新父节点的勾选状态（含 indeterminate）
- 若 `target.dataset.role === 'label'` → 可触发单选高亮，或配合 Ctrl/Shift 实现多选；也可作为 checkbox 的 label 替代方案，点击后手动触发对应 input 的 click
勾选状态同步要兼顾父子关系与 UI 反馈
Tree 勾选不是简单 toggle，需维护父子依赖。委托本身不处理逻辑，但能高效触发逻辑入口。关键点：
- 每次勾选变更后，先更新当前节点数据模型（如 `nodes[id].checked = checked`）
- 向下递归设置子节点 checked 值，并统计子节点全选/半选状态
- 向上遍历父节点，根据所有子节点状态重算自身 checked 与 indeterminate（比如：全子选中 → checked=true；部分选中 → checked=false + indeterminate=true）
- 最后批量更新 DOM：同步 checkbox 的 `checked` 和 `indeterminate` 属性，刷新节点图标（✓ / ◌ / □）
性能与边界注意：避免事件穿透与重复触发
Tree 操作密集，委托易误触。务必做两件事：
- 阻止默认行为与冒泡干扰：对 checkbox 的 click 不阻止，但对 toggle 或 label 的 click，确保只响应一次；若 label 内含 checkbox，用 `e.target === e.currentTarget` 或 `e.target.closest('[data-role="check"]')` 精准判断
- 忽略非目标元素：过滤掉文字选中、右键、disabled 元素、图标外空白区域等。可用 `if (!target.closest('[data-role]')) return;` 快速退出
- 高频操作（如连续点击父节点）可加节流或防抖，但折叠/勾选一般无需，重点是 DOM 更新批次化（如用 DocumentFragment 或 requestIdleCallback 批量写入）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
