多级权限树需用事件委托实现动态勾选高亮：在树容器监听click，捕获checkbox点击；勾选子节点时向上递归高亮父级checkbox；取消勾选时反向清理无子选中的父级高亮；动态插入节点自动生效。
理解多级权限树的勾选与高亮逻辑
在权限管理界面中，多级树形结构（如部门-角色-菜单）常需支持“勾选子节点自动高亮父节点”或“勾选父节点自动高亮所有子节点”。但若用静态绑定事件，新增节点无法响应；必须用 事件委托 + 动态监听 实现真正的动态追加高亮。
用事件委托替代逐个绑定
不要给每个 checkbox 单独调用 addEventListener，而是在树容器（如 <ul class="permission-tree">）上监听一次 click 事件，再判断目标是否为 checkbox：
- 给树容器设置唯一 class 或 id（如
id="permTree"） - 用
document.getElementById('permTree').addEventListener('click', handler) - 在 handler 中用
e.target.matches('input[type="checkbox"]')精准捕获点击项
勾选子节点时向上高亮所有父级
当子节点被勾选，需递归向上找到所有父级 checkbox，并添加高亮类（如 highlighted）：
- 从
e.target开始，用.closest('li')找到当前节点所在的<li> - 用
li.parentElement向上遍历，每次查找其父<li>中的input[type="checkbox"] - 对每个匹配到的父 checkbox 添加
classList.add('highlighted') - 注意：只高亮 checkbox 本身或其父
<label>，避免样式污染整个<li>
同步处理取消勾选与样式清理
勾选是单向操作，但取消勾选时需反向清理——不能只删当前项，要判断该父节点下是否还有任意子项被勾选：
- 取消勾选后，同样向上遍历父级
- 对每个父 checkbox，查询其所有后代 checkbox：
parentLi.querySelectorAll('input[type="checkbox"]') - 若其中
checked数量为 0，则移除highlighted类 - 可封装一个
updateParentHighlight(parentLi)函数复用逻辑
确保动态插入节点也能响应
权限树可能通过 JS 异步加载或拖拽新增节点。此时新节点的 checkbox 不会自带事件，但事件委托天然支持：
- 只要新节点插入到已绑定事件的容器内（如
#permTree），无需额外绑定 - 确保新节点结构符合预期：比如有
<li><input type="checkbox"><label>.../li> - 插入后可触发一次
updateAllHighlights()全局刷新（可选，用于初始状态同步）
