document.getElementById无法绑定动态按钮，因其只在执行时查找一次DOM，而动态插入的按钮当时不存在；重复id导致后续调用返回null，引发事件监听失败。
为什么 document.getElementById 绑不了动态按钮
因为 document.getElementById 只在执行时查找一次 DOM，而动态插入的按钮（比如用 innerHTML += 或 insertAdjacentHTML 添加）在那一刻根本不存在。更糟的是，如果重复插入相同 id（如 id="delete-btn"），浏览器只认第一个，后续调用 getElementById 会返回 null，接着 addEventListener 就报 Cannot set properties of null。
常见错误写法：
toDoList.innerHTML += '<li><button id="delete-btn">删</button></li>';
const btn = document.getElementById('delete-btn'); // 这里就已是 null
btn.addEventListener('click', handler); // 崩溃
别再为每个新按钮单独查、单独绑——这既不可靠，又随节点增多拖慢性能。
绑定到哪个父容器才真正有效
选错父容器，事件委托就形同虚设。必须满足三个条件：始终存在、不被整个替换、能稳定包裹所有目标子元素。
- ✅ 推荐：
ul#toDoList、div.product-grid、section.comment-list这类语义明确且生命周期长的容器 - ❌ 避免：
document或body—— 虽然能兜底，但事件冒泡路径过长，影响性能，也容易被其他插件或脚本干扰 - ❌ 危险：
div.container如果这个 div 本身是通过innerHTML = ...全量重写的，那它里面的所有监听器都会丢失
一句话：找那个“你从来不会用 innerHTML = 覆盖它”的父节点。
e.target.closest 是判断点击目标的唯一靠谱方式
不用 e.target.className === 'delete-btn'，也不用层层 parentNode 上溯。这些在按钮里嵌了图标、文字或 span 时全会失效。
正确姿势是用 closest() 向上查找最近的匹配祖先（包括自己）：
listContainer.addEventListener('click', e => {
const deleteBtn = e.target.closest('.delete-btn');
if (!deleteBtn) return;
const listItem = deleteBtn.closest('li');
if (!listItem) return;
// 现在可以安全移除 listItem，并同步更新数据数组
listItem.remove();
const index = Array.from(listContainer.children).indexOf(listItem);
todos.splice(index, 1);
});
closest() 兼容 IE9+，语义清晰，且天然支持按钮内任意结构（比如 <button><i class="icon-trash"></i>删</button>）。
DOM 删除后，JavaScript 数据必须同步删
视图和状态脱节是最隐蔽的 bug 来源。DOM 上删了 li，但 todos 数组还留着对应项，下次 render() 就会重复渲染，或者点击旧索引报错。
关键点：
- 不要靠按钮上的
data-index属性传索引——容易错位、难维护 - 用
Array.from(parent.children).indexOf(targetElement)实时算位置，准确可靠 - 删除前确认
targetElement确实还在parent.children里（防止异步操作导致重复触发）
委托事件不是“一劳永逸”，它只是把绑定逻辑收口到一处；数据一致性仍需你亲手维护——这点最容易被忽略，也最常引发后续问题。
