本文介绍使用事件委托解决动态元素点击事件失效的问题，通过监听父容器并利用 closest() 方法精准捕获目标元素，确保新增的分类项也能响应点击并高亮显示。
本文介绍使用事件委托解决动态元素点击事件失效的问题，通过监听父容器并利用 `closest()` 方法精准捕获目标元素，确保新增的分类项也能响应点击并高亮显示。
在构建交互式分类列表时，一个常见需求是：用户点击某个分类名称（如
），该文本立即高亮（例如变为红色或添加 .active 类）；而其他已激活项需自动取消高亮。初学者常采用遍历现有 DOM 元素并逐个绑定事件监听器的方式，但这种方式存在明显缺陷——新动态插入的元素不会自动获得事件监听器，导致点击无响应。
根本原因在于：原始代码中使用了静态节点集合遍历：
Array.from(document.getElementsByClassName("categories__text")).forEach((elem) => {
elem.addEventListener("click", /* ... */);
});该语句仅对执行时已存在于 DOM 中的 .categories__text 元素生效；后续通过 insertAdjacentHTML 添加的新
标签完全“逃逸”于监听范围之外。
✅ 正确解法是采用 事件委托（Event Delegation）：将事件监听器绑定到稳定的父容器（如
- ），再在回调中判断实际点击的目标是否符合预期选择器。
以下是推荐实现方案：
// 绑定到 ul 容器，一次注册，永久有效
document.querySelector('.categories__list').addEventListener('click', e => {
// 使用 closest() 向上查找最近的 .categories__text 元素（含自身）
const clickedText = e.target.closest('.categories__text');
if (!clickedText) return; // 点击区域不匹配，忽略
// 移除当前已激活项（安全处理：?. 可选链避免报错）
e.currentTarget.querySelector('.active')?.classList.remove('active');
// 激活当前点击项
clickedText.classList.add('active');
});配合新增分类功能（示例）：
const $list = document.querySelector('.categories__list');
const $input = document.getElementById('$input');
const addCategory = text => {
if (!text.trim()) return;
$list.insertAdjacentHTML('beforeend', `
<li class="categories__item">
<p class="categories__text">${text}</p>
</li>
`);
$input.value = ''; // 清空输入框
};HTML 结构需确保容器具备唯一可选中性（如添加 id="$list" 或直接用类名）：
<ul id="$list" class="categories__list">
<li class="categories__item">
<p class="categories__text active">All</p>
</li>
<li class="categories__item">
<p class="categories__text">Technology</p>
</li>
</ul>
<input id="$input" placeholder="Enter category name">
<button onclick="addCategory($input.value)">Add category</button>? 关键注意事项：
- ✅ 始终监听稳定父级容器（如 ul），而非动态子元素；
- ✅ 使用 e.target.closest(selector) 是判断点击目标最健壮的方式（兼容嵌套结构，如点击
内的 也能命中）；
- ✅ 利用 e.currentTarget（即绑定监听器的元素）进行内部查询，避免全局搜索，提升性能与准确性；
- ✅ 使用可选链 ?. 处理可能不存在的 .active 元素，增强代码鲁棒性；
- ❌ 避免重复定义 addActiveClass / removeActiveClass 等辅助函数——逻辑简单时内联更清晰、无副作用。
最终效果：无论初始渲染还是后续动态添加的分类项，点击均可即时激活，并自动解除前一项的激活状态，真正实现“一处绑定，全域生效”。
