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

Question

我试过了

node.cloneNode(true); // deep copy

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

我们使用Dojo库.

Answer 1

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

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

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);
}