事件委托实现待办事项勾选与删除，核心是将点击监听绑定在父容器上利用事件冒泡，通过data-action区分操作类型，用closest获取li及data-id，再执行对应逻辑并同步数据模型。
事件委托实现待办事项的勾选与删除，核心是利用事件冒泡，把点击监听绑定在父容器（如 <ul></ul> 或 <div>）上，而不是每个子项（<code><li>）单独绑定。这样新增或动态渲染的待办项无需重新绑定事件，代码更简洁、性能更好。
HTML 结构：用 data 属性标记操作类型
为每个可交互元素（复选框、删除按钮）添加语义化 data-action 属性，方便在事件处理中识别意图：
- 买牛奶
- 写周报
JavaScript：监听父容器，判断目标元素
通过 event.target 获取实际被点击的元素，再向上查找最近的 <li> 获取待办 ID，最后根据 data-action 执行对应逻辑：
- 监听
#todo-list的click事件 - 用
event.target.closest()安全获取目标操作元素及其所属<li> - 提取
data-id和data-action，区分处理勾选（toggle）或删除（delete） - 勾选时同步更新
<li>的样式（如加删除线），体现完成状态
示例代码：
document.getElementById('todo-list').addEventListener('click', function (e) {
const item = e.target.closest('li');
if (!item) return;
const id = +item.dataset.id;
const action = e.target.dataset.action;
if (action === 'toggle') {
const checkbox = e.target;
const textSpan = item.querySelector('span');
textSpan.style.textDecoration = checkbox.checked ? 'line-through' : 'none';
} else if (action === 'delete') {
item.remove();
}
});
扩展建议：配合数据模型保持一致性
真实项目中，DOM 操作应与 JS 数据同步。可维护一个数组存储待办项状态：
- 定义
todos = [{ id: 1, text: '买牛奶', done: false }, ...] - 勾选时更新
todos.find(t => t.id === id).done = checkbox.checked - 删除时用
todos = todos.filter(t => t.id !== id)并重新渲染（或仅 DOM 删除） - 避免只操作 DOM 而忽略数据，防止后续逻辑出错
注意事项：避免误触发和样式干扰
确保只有明确标记 data-action 的元素才触发逻辑，其他区域（如 <span></span> 文本）不响应点击：
- 不要给
<li>本身设data-action，否则点击空白处也会触发 - 若需支持点击文字切换状态，可显式给
<span></span>加data-action="toggle"，并在 JS 中统一处理 - 注意
closest('li')返回 null 时及时 return，防止报错
