本文讲解如何通过事件委托解决动态生成元素无法绑定点击事件的问题，使新增的分类文本点击后也能正确添加 active 类并高亮显示。
本文讲解如何通过事件委托解决动态生成元素无法绑定点击事件的问题，使新增的分类文本点击后也能正确添加 active 类并高亮显示。
在前端开发中，当页面初始渲染后动态插入新 DOM 元素（如用户点击“Add category”按钮新增分类项），若仍使用 querySelectorAll 或 getElementsByClassName 遍历并为每个元素单独绑定事件监听器，新元素将因未被纳入遍历范围而无法响应点击——这正是原代码失效的根本原因。
正确的解法是采用 事件委托（Event Delegation）：将事件监听器绑定在父容器（如
- ）上，利用事件冒泡机制捕获子元素的点击，并通过 e.target.closest(selector) 精准定位目标元素。
✅ 推荐实现方案（简洁、健壮、支持动态元素）
// 绑定到 ul 容器，一次注册，永久生效
document.querySelector('.categories__list').addEventListener('click', (e) => {
// 查找被点击的 .categories__text 元素（支持嵌套结构，容错性强）
const clickedText = e.target.closest('.categories__text');
if (!clickedText) return; // 非目标元素，忽略
// 移除当前已激活项的 active 类（使用可选链避免报错）
e.currentTarget.querySelector('.active')?.classList.remove('active');
// 为点击项添加 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 结构需确保容器具备唯一标识与语义化结构：
<ul id="categoriesList" class="categories__list">
<li class="categories__item">
<p class="categories__text active">All</p>
</li>
<li class="categories__item">
<p class="categories__text">Item 1</p>
</li>
</ul>
<input id="$input" placeholder="Enter category name">
<button onclick="addCategory($input.value)">Add category</button>⚠️ 关键注意事项
- 不要重复绑定：避免在 addCategory 内再次遍历 .categories__text 并加监听器，否则会导致内存泄漏和重复触发。
-
closest() 比 parentElement 更可靠：它能跨越多层 DOM 向上查找，兼容
直接点击或其子元素（如图标）被点击的场景。
-
CSS 样式需同步生效：确保 .active 类定义了可见样式（如 color: red; 或 background-color: #ffebee;），示例中使用了 background: lightgray，可根据需求调整：
.categories__text.active { color: #d32f2f; /* 红色文字 */ font-weight: 600; } - 性能与可维护性：事件委托大幅减少监听器数量，提升性能；逻辑集中于一处，便于后续扩展（如添加动画、API 请求等）。
通过以上重构，无论初始渲染还是运行时动态添加的分类项，均能统一响应点击行为，实现一致、可扩展的交互体验。
