事件委托在组织架构图中通过父容器监听+event.target.closest()精准捕获节点，利用data-id等属性标识身份，支持动态增删与多行为共存，避免重复绑定且兼容异步渲染。
事件委托在复杂组织架构图中非常实用，能避免为每个节点单独绑定事件，尤其当节点动态增删、层级深、数量大时，既节省内存又提升性能。核心思路是：把点击监听器统一挂在父容器（如 #org-chart）上，利用事件冒泡和 event.target 精准识别被点击的节点元素。
用 data 属性标记节点身份
每个节点（如 <div class="node">）应携带可识别的业务标识，推荐用 data-id 或 data-role，而不是依赖 DOM 位置或 class 名组合——后者易受样式重构影响。
-
✅ 推荐写法：
<div class="node" data-id="emp-1024" data-level="2">张经理</div> -
❌ 避免写法：
<div class="node level-2 manager">张经理</div>（class 不稳定，语义弱）
监听父容器，用 closest() 定位目标节点
直接监听 click 事件时，event.target 可能是子元素（如头像 <img>、姓名 <span>），需向上查找最近的节点容器。用 element.closest('.node') 比层层判断 parentNode 更安全可靠。
document.getElementById('org-chart').addEventListener('click', (e) => {
const nodeEl = e.target.closest('.node');
if (!nodeEl) return;
const empId = nodeEl.dataset.id;
const level = nodeEl.dataset.level;
// 根据 empId 加载详情、展开子树、高亮路径等
handleNodeClick(empId, level);
});
区分操作区域，支持多行为共存
一个节点内常有多个可交互区域（如“编辑图标”、“删除按钮”、“头像”、“姓名文本”）。可在子元素上加特定 data-action，统一处理逻辑分支：
立即学习“Java免费学习笔记（深入）”；
<div class="node"><img data-action="view-profile"><span data-action="edit">✎</span></div>- 在事件处理器中：
const action = e.target.dataset.action;，再switch(action)分发 - 避免给每个图标单独绑定事件，也不用阻止冒泡——保持委托链完整
注意动态渲染后的事件一致性
异步加载子部门、折叠/展开切换、搜索高亮重绘等都会新增或移除节点。事件委托天然支持动态内容，但需确保：
- 新插入的节点仍符合选择器规则（如带
.node和data-id） - 不重复绑定监听器（常见错误：每次渲染都
addEventListener） - 若用框架（如 React/Vue），委托仍可设在 chart 容器上，但需确保 ref 或 ID 稳定
