如何使用事件侦听器复制 DOM 节点？

Question

我试过了

node.cloneNode(true); // deep copy

它似乎没有复制我使用 node.addEventListener("click", someFunc); 添加的事件监听器。

我们使用 Dojo 库。

原文由 Chakradar Raju 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

cloneNode() 不复制事件侦听器。事实上，一旦附加了事件监听器，就无法通过 DOM 获取事件监听器，因此您的选择是：

• 手动将所有事件侦听器添加到克隆节点
• 重构您的代码以使用事件委托，以便所有事件处理程序都附加到包含原始和克隆的节点
• 使用围绕 Node.addEventListener() 的包装函数来跟踪添加到每个节点的侦听器。例如，这就是 jQuery 的 clone() 方法能够复制带有事件侦听器的节点的方式。

原文由 Tim Down 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这并不能准确回答问题，但如果用例允许 移动 元素而不是 复制 元素，则可以将 removeChild 与 appendChild 一起使用，这将保留事件侦听器。例如：

 function relocateElementBySelector(elementSelector, destSelector) {
  let element = document.querySelector(elementSelector);
  let elementParent = element.parentElement;
  let destElement = document.querySelector(destSelector);
  elementParent.removeChild(element);
  destElement.appendChild(element);
}

原文由 Richard Greenwood 发布，翻译遵循 CC BY-SA 4.0 许可协议