事件委托是唯一合理选择，将click监听器统一绑定到父容器，利用冒泡机制通过event.target.closest()判断目标项，避免频繁增删监听器、确保动态新增项自动响应，同时需添加tabindex="0"并监听enter/space键以支持键盘访问。
为什么不能给每个菜单项单独绑 click 事件
动态增减项时，频繁调用 addEventListener 或清理旧监听器（removeEventListener）会带来明显开销，尤其在列表项上百时，DOM 操作 + 事件注册/销毁本身就成了性能瓶颈。更关键的是，新插入的项默认没绑定事件，容易漏处理——你得额外写逻辑确保新增 <li> 也响应点击。
用事件委托绑定到父容器是唯一合理选择
把监听器统一挂在列表容器（如 <ul id="menu"></ul>）上，利用事件冒泡捕获子元素触发的 click，再通过 event.target 判断是否为有效菜单项。这样无论增删多少项，监听器只有一份，且新增项天然支持交互。
实操要点：
- 必须检查
event.target是否匹配目标元素，推荐用closest()向上找最近的<li>或带特定 class 的项，避免误判文本节点或子图标 - 不要依赖
event.target.tagName === 'LI'——如果<li>内有<span></span>或<i></i>，点击它们时target就不是LI - 若需区分“删除按钮”和“菜单项主区域”，可在按钮上加
data-action="delete"，统一用dataset.action分流，比多个if (target.classList.contains(...))更清晰
动态增减项时 DOM 操作要避开重排陷阱
高频增删（比如搜索实时过滤、拖拽排序）下，反复调用 appendChild 或 removeChild 会强制浏览器同步计算样式和布局，造成卡顿。关键是把批量变更收敛到一次渲染。
推荐做法：
- 新增多条目时，用
DocumentFragment批量构建再插入，而非逐个appendChild - 删除时避免循环中多次调用
remove()；先收集待删节点，再用while (fragment.firstChild) fragment.removeChild(fragment.firstChild)清空后一次性替换 - 如果使用
innerHTML = newHTMLString，注意会销毁所有已绑定事件（即使用了事件委托，内部子节点的内联onclick或其他监听器仍会丢失），所以仅限纯静态内容场景
别忽略键盘与屏幕阅读器支持
仅靠冒泡处理鼠标点击，会让键盘用户（Tab + Enter）和屏幕阅读器完全不可用。菜单项必须是可聚焦的，且响应 Enter 和 Space 键。
补全要点：
- 每个菜单项加
tabindex="0"，确保可聚焦 - 监听父容器的
keydown事件，当event.key是"Enter"或" "（空格）时，用event.target.closest('[role="menuitem"]')定位并触发相同逻辑 - 若菜单支持方向键导航（↑↓），需额外维护焦点索引，但这是进阶需求——基础冒泡方案里，至少让 Enter/Space 可用，否则等于半残
closest 判定条件太松、没处理键盘、或者在增删时无意识触发了重排。这些点不显眼，但一上线就暴露。
