事件委托实现待办列表完成状态切换，核心是将click事件绑定到ul父容器，通过e.target判断点击目标为checkbox或li，再调用toggleItemStatus更新样式与数据。
用事件委托实现待办事项列表的完成状态切换，核心是把点击事件监听绑定在父容器（如 ul 或 ol），而不是每个待办项（li）上。这样既能动态响应新增/删除的待办项，又避免重复绑定，性能更优。
1. HTML 结构要支持委托
确保每个待办项有明确可识别的结构，比如用 checkbox 控制状态，或直接点击文字/整个 li 切换：
<ul id="todo-list"> <li data-id="1"><input type="checkbox"> 学习 JavaScript</li> <li data-id="2"><input type="checkbox"> 写待办功能</li> </ul>
关键点：
- 父容器（ul）有唯一 ID（如 todo-list）便于获取
- 每个 li 带 data-id 属性，方便后续操作数据
- checkbox 放在内部，点击它或它的父 li 都应触发状态切换
2. 绑定委托事件并判断目标
监听父容器的 click 事件，在回调中检查实际点击的是不是 checkbox 或其父 li：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
document.getElementById('todo-list').addEventListener('click', function(e) {
// 获取被点击的真实元素
const target = e.target;
<p>// 情况1：直接点了 checkbox
if (target.type === 'checkbox') {
toggleItemStatus(target.closest('li'));
return;
}</p><p>// 情况2：点了 li（比如文字区域），找里面的 checkbox
if (target.tagName === 'LI') {
const checkbox = target.querySelector('input[type="checkbox"]');
if (checkbox) {
checkbox.checked = !checkbox.checked;
toggleItemStatus(target);
}
}
});3. 封装状态切换逻辑
抽离共用逻辑，比如添加完成样式、更新数据模型、持久化等：
立即学习“Java免费学习笔记（深入）”；
function toggleItemStatus(li) {
const id = li.dataset.id;
const checkbox = li.querySelector('input[type="checkbox"]');
<p>// 更新 UI：加删除线、灰阶等
li.style.textDecoration = checkbox.checked ? 'line-through' : 'none';
li.style.opacity = checkbox.checked ? '0.6' : '1';</p><p>// （可选）同步更新 JS 数据数组
// todos.find(t => t.id == id).completed = checkbox.checked;</p><p>// （可选）存到 localStorage
// saveTodos(todos);
}4. 注意细节和兼容性
- 使用 e.target 而非 this，因为事件在父元素上触发，this 是 ul
- 用 closest('li') 安全获取最近的待办项容器，避免层级变化导致出错
- 如果待办项里还有其他可点击元素（如删除按钮），需提前判断 target.classList.contains('delete-btn') 并 return，避免误触发
- 不依赖 jQuery，纯原生写法兼容现代浏览器（IE11+ 需用 matches() 替代 closest）
