事件委托通过将监听器绑定在已存在父容器上，利用冒泡机制捕获动态子元素事件；需选稳定父容器（如#todo-list），用event.target.matches()和closest()精准匹配目标元素，新增元素自动生效。
用事件委托给未来元素绑定事件，核心是把事件监听器绑定在已存在且不会被替换的父容器上，利用事件冒泡机制捕获子元素（包括后续动态添加的）触发的事件，并通过 event.target 判断是否命中目标元素。
选择稳定、层级合适的父容器
父容器必须在页面加载时就存在，且不能被 JS 清空或替换（比如整个 #list 被 innerHTML = '' 重置就会丢失监听）。推荐使用语义明确、生命周期长的容器，如：
-
<ul id="todo-list"></ul>—— 适合管理动态增删的列表项 -
<div class="card-container"></div>—— 适合卡片式内容区域 - 避免用
document.body或document（性能略差，且可能误捕全局事件）
监听冒泡事件，用 event.target 精准匹配
监听父容器上的事件（如 click），在回调中检查 event.target 是否符合目标选择器。可用 matches() 方法判断：
document.getElementById('todo-list').addEventListener('click', function (e) {
if (e.target.matches('button.delete')) {
const item = e.target.closest('li'); // 找到最近的 li 父项
item?.remove();
}
});
注意：e.target 是实际被点击的元素（可能是 <span> 或 <i>），所以用 closest() 向上找语义化父元素更稳妥。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
动态添加元素后无需重新绑定
只要新元素结构符合原先的匹配规则，事件就能自动生效。例如：
// 后续添加的新项
const newItem = document.createElement('li');
newItem.innerHTML = '<span>买牛奶</span> <button class="delete">×</button>';
document.getElementById('todo-list').appendChild(newItem);
// ✅ 点击这个新按钮，上面的事件监听器依然会响应
兼容旧浏览器可选方案
如果需支持 IE8–9，matches() 可降级为 msMatchesSelector 或用 polyfill；closest() 可手写简易实现：
function closest(el, selector) {
while (el && !((el.matches || el.msMatchesSelector).call(el, selector))) {
el = el.parentElement;
}
return el;
}
现代项目建议直接使用原生 matches() 和 closest()，简洁可靠。
