如何使用元素的innerHTML复制元素的事件？

Question

我将一个简单的灯箱功能整合到了我的Web应用程序中：

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

问题是我希望将div的交互性复制到灯箱中（这些图每个都有使它们具有交互性的事件侦听器）。 有什么办法可以减少存储所有事件并以某种方式复制这些事件呢？

Answer 1

除非您使用的是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;