应使用 getElementById 获取稳定父容器作为委托根节点，再结合 closest 进行目标校验，确保事件委托局部化、安全且支持动态内容。

不能“锁死”根节点，getElementById 只是获取一个元素引用，它本身不提供锁定或作用域隔离能力。但你可以用它获取一个**确定的、稳定的父容器**，再结合 closest 在该容器内做精准的事件委托——这才是实际可行且安全的“局部委托”方案。

用 getElementById 定义委托边界

选一个不会被动态替换、层级明确、唯一 ID 的容器元素作为委托根节点（比如 <div id="user-list">），而不是用 document 或 body。这样事件只响应这个区域内的目标，天然隔离其他区域的干扰。

示例：

• const listRoot = document.getElementById('user-list');
• 后续所有事件监听都绑定在 listRoot 上，而非全局
• 即使页面其他地方有同名 class（如 .delete-btn），也不会误触发

用 closest 做目标校验，避免冒泡误判

点击事件冒泡时，event.target 可能是子元素（比如图标、文字），直接判断 target.classList.contains(...) 容易漏判或错判。用 closest() 向上查找最近的符合条件的祖先元素，更鲁棒。

示例：

• listRoot.addEventListener('click', e => {
• const btn = e.target.closest('.delete-btn');
• if (btn) { /* 安全执行删除逻辑 */ }
• });

注意：ID 必须存在且唯一，否则委托失效

getElementById 返回 null 时，后续绑定会报错。务必确保 DOM 加载完成后再执行，推荐用 DOMContentLoaded 或将脚本放在 </body> 前。

安全写法：

• document.addEventListener('DOMContentLoaded', () => {
• const root = document.getElementById('user-list');
• if (!root) return; // 防止 ID 不存在
• root.addEventListener('click', handler);
• });

进阶：支持动态插入内容

只要新元素插入到 listRoot 内部，且结构符合 .delete-btn 等选择器，委托依然生效——无需重新绑定。这是事件委托的核心价值。

例如用 root.insertAdjacentHTML('beforeend', '<button class="delete-btn" data-id="123">删</button>') 后，点击照样被捕获。