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

Question

I incorporated a simple lightbox functionality into my webapp:

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

The problem is that I want the interactivity of the div to copy into the lightbox (these are graphs that each have event listeners that make them interactive). Is there any way that I can accomplish this less storing all of the events inside an array and somehow copying those?

Answer 1

Unless you are using jQuery you will not be able to clone a node with all it's event handlers and even if you could it's usually not a good idea (I could expand if you need to).

I suppose that these listeners were attached through some processes targetting these DOM nodes (eg applying a plugin). What you should be doing is simply do a deep or shallow copy of the DOM elements you want using Element.prototype.cloneNode and re-execute those processes against the clones.

If the cloning process is complex you might consider encapsulating it within the class which is adding the listeners. Something like:

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;