用 addEventListener 绑定添加按钮点击事件，在回调中获取输入值、创建 li 并追加到容器，清空输入框前需检查非空；删除用事件委托监听 ul，通过 e.target.matches('.delete-btn') 判断并移除父级 li；localStorage 存取需 JSON 序列化并容错处理；事件监听器应只绑定一次，避免重复。
如何用 addEventListener 绑定添加任务按钮的点击事件？
用户点击“添加”按钮后必须实时更新 DOM，不能只改数据不渲染。关键在于监听按钮的 click 事件，并在回调中获取输入框值、创建新 li 元素、追加到列表容器。
- 输入框应有唯一
id（如task-input），方便用document.getElementById('task-input').value取值 - 清空输入框内容要写在追加 DOM 之后，否则可能因异步或焦点问题漏清
- 必须检查输入是否为空，避免生成空白
li：if (input.trim() === '') return;
- 不要用
innerHTML += ...动态拼接，会重置已绑定的事件监听器（比如后续的删除按钮）
怎么给每个待办项的删除按钮绑定独立事件？
每个任务项里的删除按钮是动态生成的，不能对它们逐个调用 addEventListener。推荐用事件委托：监听整个 ul 容器，判断点击目标是否为 delete-btn 类的按钮。
- 容器元素需有明确
id或class（如todo-list） - 删除按钮建议带
data-id属性标识对应任务（例如data-id="3"），便于后续与数组索引或唯一 ID 关联 - 在事件回调中用
e.target.matches('.delete-btn')判断，再用e.target.closest('li')找到父级任务项并移除 - 避免直接删数组再重渲染整个列表——性能差且丢失当前滚动位置和焦点状态
为什么用 localStorage 保存任务时要手动序列化？
localStorage.setItem() 只接受字符串，直接存数组会变成 "[object Object]"，取出来就废了。
- 必须用
JSON.stringify(tasks)存，用JSON.parse(localStorage.getItem('tasks') || '[]')取 -
|| '[]'是关键容错：首次读取时getItem返回null，JSON.parse(null)会报错 - 每次增删任务后都要立刻调用
localStorage.setItem()，不要攒着等页面卸载——beforeunload不可靠，尤其移动端容易被系统终止
如何避免重复绑定事件导致多次触发？
常见错误是在函数里反复调用 addTodoButton.addEventListener('click', handler)，比如把绑定逻辑放在一个刷新列表的函数中，每次调用都叠加监听器。
立即学习“Java免费学习笔记（深入）”；
- 事件监听器应在页面加载完成时绑定一次，通常放在
DOMContentLoaded回调或script底部 - 如果需要动态重建按钮（如更换模板），先用
removeEventListener解绑旧的，或直接用事件委托避开这个问题 - 调试时可临时加
console.log('handler fired')确认是否重复执行；Chrome DevTools 的Event Listeners面板能直观看到某个元素上绑了多少个同类型监听器
DOM 更新和事件绑定的时机稍有错位，就可能让按钮失效或触发多次——这不是代码写得不够“完整”，而是浏览器执行模型本身带来的约束。
