Clone element with all its events

问题:

I'm cloning a textarea in a page but the cloned element doesn't have any event of the primary element, is there any way to clone all events in cloned element?

var dupNode = node.cloneNode(deep);

回答1:

You can maybe use getEventListeners on nodes? Don't know how the support is, or if it's only supported in the console?

function cloneMassive(node) {
    // Clone the node, don't clone the childNodes right now...
    var dupNode = node.cloneNode(false);
    var events = getEventListeners(node);

    for(var p in events) {
        // All events is in an array so iterate that array:
        events[p].forEach(function(ev) {
            // {listener: Function, useCapture: Boolean}
            dupNode.addEventListener(p, ev.listener, ev.useCapture);
        });
    }
    // Also do the same to all childNodes and append them.
    if (node.childNodes.length) {
        [].slice.call(node.childNodes).forEach(function(node) {
            dupNode.appendChild(cloneMassive(node));
        });
    }

    return dupNode;
}

---

var dupBody = cloneMassive(document.body);

But it seems that getEventListeners isn't really supported:

Get event listeners attached to node using addEventListener

---

If you need to copy all event properties on the node as well you will need a list of all, and then simply copy them over:

['onclick', 'onmouseover', '...'].forEach(function(method) {
    dupNode[method] = node[method];
});

回答2:

I was solving this problem lately and even that this is old post, just in case somebody is trying to find out, i add my solution :

var button = document.createElement("i");
var click = document.createAttribute("onclick");
click.value = "FunctionName(this)";
button.attributes.setNamedItem(click);

Instead of using addEventListener, just create function FunctionName. Well this is useless if you are extending objects that use addEventListener