本文详解如何使用事件委托解决动态添加的DOM元素无法绑定事件的问题，避免ID重复导致的Cannot set properties of null错误，并提供可复用、符合Web标准的待办列表交互实现方案。
本文详解如何使用事件委托解决动态添加的dom元素无法绑定事件的问题，避免id重复导致的`cannot set properties of null`错误，并提供可复用、符合web标准的待办列表交互实现方案。
在构建动态待办列表（To-Do List）时，一个常见误区是：直接为尚未存在的元素提前获取 DOM 并绑定事件监听器。你原始代码中调用 document.getElementById("done-btn") 时，该按钮尚未创建（它只在 addBtn.click 后才通过 innerHTML += ... 插入），因此 changeBtn 为 null，进而触发 Cannot set properties of null 错误。此外，所有 <li> 都被赋予相同 ID item，违反 HTML 规范（ID 必须唯一），导致 document.querySelector("#item") 始终只匹配第一个元素，无法精准控制目标项。
根本解法是采用 事件委托（Event Delegation）：不在每个按钮上单独绑定事件，而是将监听器绑定到其稳定存在的父容器（如 <ul id="todoList">），再通过事件对象的 event.target 判断点击源是否为 .done-btn 按钮，最后操作其父级 <li> 元素。
以下是优化后的完整实现：
<!-- HTML 结构示例 --> <input type="text" id="input-el" placeholder="输入新任务"> <button id="add-btn">添加</button> <ul id="todoList"></ul>
let myList = [];
const inputFieldEl = document.getElementById("input-el");
const addBtn = document.getElementById("add-btn");
const toDoList = document.getElementById("todoList");
// ✅ 正确：使用 createElement + appendChild 替代 innerHTML +=
// —— 避免潜在 XSS 风险，且更利于 DOM 操作与调试
addBtn.addEventListener("click", function () {
const inputValue = inputFieldEl.value.trim();
if (!inputValue) return; // 忽略空输入
myList.push(inputValue);
clearInputField();
const newItem = document.createElement("li");
newItem.innerHTML = `
<button class="done-btn" aria-label="标记为完成">${String.fromCodePoint(0x2705)}</button>
<span class="task-text">${inputValue}</span>
`;
toDoList.appendChild(newItem);
});
// ✅ 正确：事件委托 —— 监听父容器，动态响应子元素事件
toDoList.addEventListener("click", function (event) {
// 检查点击目标是否为 .done-btn 按钮（含其子元素）
const doneBtn = event.target.closest(".done-btn");
if (!doneBtn) return;
const listItem = doneBtn.parentElement;
listItem.style.backgroundColor = "#F1C40F";
listItem.style.borderRadius = "6px";
listItem.classList.add("completed"); // 可选：便于 CSS 扩展样式
});
function clearInputField() {
inputFieldEl.value = "";
}关键改进说明：
- ✅ 移除重复 ID：改用 class="done-btn" 和 class="task-text"，语义清晰且允许多个实例；
- ✅ 避免 innerHTML +=：使用 createElement + appendChild 更安全、高效，防止 HTML 解析异常或脚本注入；
- ✅ 事件委托生效：toDoList 在页面加载时即存在，监听其 click 事件可捕获所有后代 .done-btn 的点击，无论它们何时创建；
- ✅ 精准定位目标：使用 event.target.closest(".done-btn") 确保即使点击按钮内图标或空白区域也能可靠触发；
- ✅ 增强健壮性：添加 trim() 和空值校验，防止空任务插入；aria-label 提升无障碍访问支持。
进阶建议：
若需支持「取消完成」、「删除」或「持久化存储」，可在 <li> 上添加 data-id 属性标识任务索引，并配合 classList.toggle() 实现状态切换，而非硬编码样式。例如：
listItem.classList.toggle("completed");
listItem.style.textDecoration = listItem.classList.contains("completed")
? "line-through" : "none";遵循以上模式，你的待办列表将具备良好的可维护性、可访问性与扩展性，彻底规避动态 DOM 绑定失败问题。
