如何复制元素's事件及其内部HTML

How do I copy an element's events with its innerHTML?

本文关键字：事件 HTML 内部 何复制 复制 元素      更新时间：2023-09-26

我在我的网络应用程序中加入了一个简单的灯箱功能：

for(var i = 0, l = figs.length; i<l; i++){
    figs[i].addEventListener("dblclick",function(){
        lightbox.style.display = "block";
        lbox.innerHTML = this.innerHTML;
    });
}

问题是，我希望div的交互性复制到lightbox中（这些图都有事件监听器，使它们具有交互性）。有没有什么方法可以实现这一点——将所有事件存储在一个数组中并以某种方式复制这些事件？

除非您使用jQuery，否则您将无法克隆具有所有事件处理程序的节点，即使可以，这通常也不是一个好主意（如果需要，我可以扩展）。

我想这些监听器是通过一些针对这些DOM节点的进程连接的（例如应用插件）。您应该做的只是简单地使用Element.prototype.cloneNode对您想要的DOM元素进行深度或浅层复制，然后对克隆重新执行这些过程。

如果克隆过程很复杂，您可以考虑将其封装在添加侦听器的类中。类似于：

function SomeObj(el) {
    this.el = el;
    attachSomeHandlersToEl();
}
SomeObj.prototype.clone = function () {
    var newEl = this.el.cloneNode(true);
    return new this.constructor(newEl);
};
var el = document.getElementById('some-el'),
    someObj = new SomeObj(el),
    clonedEl = someObj.clone().el;
相关文章：