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

时间:2014-09-02 17:45:11

标签: javascript javascript-events

我在我的webapp中加入了一个简单的灯箱功能:

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

问题在于我希望div的交互性能够复制到灯箱中(这些是每个都有事件监听器的图形,使它们具有交互性)。有没有什么方法可以实现这一点,减少存储数组内的所有事件,并以某种方式复制它们?

1 个答案:

答案 0 :(得分:0)

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