cloneNode(true) 不复制事件监听器是设计行为，只复制结构、属性和可序列化状态；需手动重绑、用事件委托或封装创建函数来应对。
cloneNode(true) 不会复制事件监听器，这是它的设计行为，不是 bug。 无论你是否设置 true（深拷贝），原生 DOM 的 cloneNode() 方法**从不拷贝通过 addEventListener() 绑定的事件监听函数**，也不会复制内联事件属性（如 onclick）的函数引用。它只复制节点结构、属性、文本内容和部分可序列化的状态（比如 input 的 value 值在某些浏览器中会被保留，但非标准行为）。
为什么事件监听器不被克隆？
事件监听器是 JavaScript 函数引用，绑定在内存中的对象上，而 DOM 克隆操作是“结构化复制”，不涉及执行环境或闭包的迁移。克隆后的节点是一个全新对象，没有自动继承原节点的运行时行为。
常见应对方式（按推荐顺序）
• 重新绑定事件监听器：克隆后，显式对新节点调用 addEventListener()。最可靠、语义清晰，适合监听器逻辑固定且可复用的场景。
示例：
<button id="btn">点击</button>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => console.log('原按钮'));
const clone = btn.cloneNode(true);
clone.id = 'btn-clone'; // 避免 ID 冲突
clone.addEventListener('click', () => console.log('克隆按钮')); // 手动重绑
document.body.appendChild(clone);
• 使用事件委托（推荐用于动态/批量节点）：不在节点本身绑定，而是在父容器（甚至 document）上监听，利用事件冒泡和 event.target 判断来源。这样克隆出的新节点天然“可用”，无需额外操作。
示例：
document.addEventListener('click', (e) => {
if (e.target.matches('.action-btn')) {
console.log('触发了某个 action-btn:', e.target);
}
});
// 后续 cloneNode 出的 .action-btn 节点无需任何处理，点击即响应
• 封装创建逻辑为函数：把节点创建 + 事件绑定封装成一个函数，克隆后直接调用该函数初始化新节点。
示例：
function createButton(text, handler) {
const btn = document.createElement('button');
btn.textContent = text;
btn.addEventListener('click', handler);
return btn;
}
const original = createButton('原始', () => alert('原始'));
const clone = createButton('克隆', () => alert('克隆')); // 不是 cloneNode，而是新建+绑定
不建议的做法
• 尝试用 getEventListeners()（Chrome DevTools API，非标准，不可用于生产）；
• 修改 onclick 等内联属性（仅支持字符串形式，无法绑定闭包或外部函数，且破坏分离原则）；
• 使用第三方深克隆库（如 Lodash cloneDeep）处理 DOM 节点——它们不适用于真实 DOM 对象，可能引发错误或内存泄漏。
补充说明：自定义元素与 Shadow DOM
如果是自定义元素（class extends HTMLElement），其内部逻辑（包括 connectedCallback 中的事件绑定）会在克隆后插入文档时自动触发（前提是使用 cloneNode(true) 并随后 appendChild）。但注意：克隆本身仍不复制监听器，而是靠生命周期回调重建行为。
