事件委托通过父元素监听事件并利用冒泡机制处理子元素交互，适用于动态文件列表的删除操作；需为容器绑定一次click事件，用closest()判断点击目标，定位并移除对应li及数据，同时释放预览URL。
事件委托是通过在父元素上监听事件，利用事件冒泡机制捕获子元素的交互行为。处理文件上传列表的删除点击时，它能避免为每个删除按钮重复绑定事件，尤其适合动态增删的文件项。
给上传列表容器绑定点击事件
确保文件列表有一个统一的父容器（如 <ul id="fileList">），所有文件项（<li>）和删除按钮（如 <button class="delete-btn">）都放在其中。只需在这个父容器上监听一次 click，无需每次添加文件后重新绑定。
- 推荐使用
addEventListener，而非内联onclick - 注意不要阻止事件冒泡（除非有特殊需求），否则委托会失效
- 若列表初始为空，也要提前绑定——后续动态插入的按钮自然生效
判断点击目标是否为删除按钮
在事件回调中，用 event.target 检查实际被点击的元素，并向上查找是否属于某个删除按钮（或其内部元素）。常用方法是用 closest()：
-
if (event.target.closest('.delete-btn')) { ... }可匹配按钮本身及其子元素（如图标、文字） - 避免只检查
event.target.classList.contains('delete-btn')，否则点击按钮内的<i>就会失效 - 获取当前操作对应的文件项，可用
event.target.closest('li')定位到该文件的<li>元素
安全移除文件并同步数据
找到对应 <li> 后，不仅要从 DOM 删除，还要更新 JavaScript 中维护的文件列表（如 files = files.filter(...)），避免状态不一致。
立即学习“Java免费学习笔记（深入）”；
- 建议给每个
<li>添加唯一标识（如data-file-id），便于精准匹配和清理 - 删除前可加简单确认：
if (!confirm('确定删除该文件？')) return; - 移除 DOM 后，调用
URL.revokeObjectURL()释放本地预览 URL（如果用了createObjectURL）
避免常见陷阱
几个容易出错的地方需要特别注意：
- 不要在循环中用
var声明事件处理器变量，会导致闭包引用错误；用let或直接在委托里查节点 - 如果删除按钮是后来用
innerHTML插入的，确保它带有正确 class；用insertAdjacentHTML更可控 - 移动端要注意
click延迟，必要时可监听touchstart并阻止默认行为
