最后通过 event.target，配合 Element.closest() 或 Element.matches()，准确判断事件是不是落在目标元素上。

推荐实现

// 推荐：单点监听 + 事件委托
document.getElementById('tasks').addEventListener('click', (e) => {
const target = e.target;

// 检查是否点击了 .checkbox 元素（支持直接点击或其内部子元素）
if (target.matches('.checkbox') || target.closest('.checkbox')) {
const checkbox = target.matches('.checkbox') 
 target 
: target.closest('.checkbox');
checkbox.classList.toggle('checked');
}
});

关键说明

• target.matches('.checkbox') 判断点击目标本身是否为 checkbox；
• target.closest('.checkbox') 向上查找最近的 checkbox 父元素，适用于 checkbox 内含伪元素或 padding 区域；
• 统一操作 checkbox.classList.toggle('checked')，确保样式切换逻辑一致；
• 所有未来动态插入的 .checkbox（例如新增任务项）都会自动生效，无需重新绑定。

注意事项

• 避免重复绑定：确保该监听器仅执行一次，如放在模块初始化函数中，而非每次渲染都调用；
• 不要混用 ID 选择器作为唯一标识：原代码中若多个元素使用相同 id（如多个 id="task"），会违反 HTML 规范并导致 getElementById 行为不可预测；
• CSS 类 .checked 应定义清晰视觉反馈，如背景色、图标等，确保用户明确感知状态变化；
• 若需同步更新数据模型，如标记任务完成，建议在此处触发对应逻辑，如更新 task 对象的 completed 字段。

总结

通过事件委托，你不仅解决了动态元素监听问题，还提升了性能，减少了监听器数量。

同时，它也增强了可维护性，并符合现代前端开发的最佳实践。

《夸克》非常好用的免费AI浏览器

下载APP查看