事件委托在下拉菜单中通过监听父容器（如.dropdown-menu）的点击事件，动态捕获选项点击并自动收起菜单，避免为每个选项单独绑定事件，支持动态内容和无障碍访问。
事件委托在下拉菜单中非常实用：它避免为每个选项单独绑定事件，还能动态处理新增/删除的选项，并在点击后自动收起菜单。核心是监听父容器（如 .dropdown-menu）的点击事件，通过 event.target 判断是否点中了某个选项，再执行业务逻辑并关闭菜单。
监听菜单容器，用事件委托捕获选项点击
不要给每个 <li> 或 <a></a> 单独加 click 监听器。而是把监听器绑定在下拉菜单的外层容器（比如 .dropdown-menu）上：
const dropdownMenu = document.querySelector('.dropdown-menu');
dropdownMenu.addEventListener('click', function (e) {
const item = e.target.closest('a.dropdown-item, li.dropdown-item');
if (!item) return;
// 此处处理选中逻辑，例如获取值、触发回调等
const value = item.dataset.value || item.textContent.trim();
console.log('选中:', value);
// 自动收起菜单（关闭整个下拉）
closeDropdown();
});
正确关闭下拉菜单的关键操作
收起菜单不只是隐藏 .dropdown-menu，还要还原触发按钮/输入框的状态（比如移除 show 类、blur 输入框、重置焦点等）。常见做法：
- 调用 Bootstrap 的
hide()方法（若使用其 JS 组件）：bootstrap.Dropdown.getInstance(triggerEl)?.hide(); - 手动控制类名：
dropdownMenu.classList.remove('show'); triggerEl.classList.remove('show'); - 确保同时 blur 触发元素，防止键盘操作残留（尤其对可聚焦的下拉）：
triggerEl.blur(); - 如果菜单是通过
click外部区域关闭的，记得在本委托逻辑里也调用同样的关闭函数，避免重复逻辑
注意事件冒泡与阻止默认行为
如果选项是 <a href="#"></a>，点击会触发页面跳转或锚点滚动，必须 e.preventDefault()；如果是 <button></button> 或 <div>，一般无需阻止。另外，不需要 <code>e.stopPropagation() —— 事件委托依赖冒泡，阻止反而会让委托失效：
立即学习“Java免费学习笔记（深入）”；
dropdownMenu.addEventListener('click', function (e) {
const item = e.target.closest('a.dropdown-item');
if (!item) return;
e.preventDefault(); // ✅ 防止 a 标签跳转
const value = item.dataset.value;
handleSelect(value);
closeDropdown();
});
兼容动态内容和无障碍（a11y）
事件委托天然支持动态渲染的选项（如通过 JS 插入新 <li>），无需重新绑定。但要注意：
- 确保
closest()查询的选择器覆盖所有可能的点击目标（比如支持span包裹文字的结构：e.target.closest('a, li, button')） - 为键盘用户保留
Enter/Space支持：在菜单容器上监听keydown，对聚焦项做相同处理 - 点击后应将焦点移回触发按钮（提升可访问性）：
triggerEl.focus();
