使用 clonenode(true) 方法可以深克隆包含事件处理器的节点。该方法在复制节点及其子树时，会保留所有绑定的 dom 事件监听器，无需手动重新绑定。
cloneNode(true) 如何保留事件处理器
调用 cloneNode(true) 时，浏览器会在内部遍历节点树并复制每个节点的状态，包括通过 addEventListener 注册的监听器。这意味着新节点拥有与原节点完全相同的交互能力，且互不干扰。
const original = document.getElementById('btn');
original.addEventListener('click', () => console.log('Original'));
const cloned = original.cloneNode(true);
document.body.appendChild(cloned);
cloned.click(); // 输出: Original克隆后节点与源节点的独立性验证
克隆后的节点虽然行为一致，但在 DOM 树中是独立的实体。修改其中一个的属性或样式不会影响另一个，且它们各自的事件触发是隔离的。
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
const btn = document.createElement('button');
btn.textContent = 'Click';
btn.addEventListener('click', () => alert('A'));
const clone = btn.cloneNode(true);
// 修改原节点不影响克隆体
btn.textContent = 'Modified';
console.log(clone.textContent); // 输出: Click
// 移除原节点监听器不影响克隆体
btn.removeEventListener('click', () => alert('A'));
clone.click(); // 依然弹出: A克隆节点在动态列表中的应用场景
在实际开发中，这种特性常用于模板渲染或批量操作。例如，从一个隐藏的模板节点克隆出多个具有相同交互逻辑的按钮，而无需为每个新元素重复编写绑定代码。
