Question

I have an event handler set up using plain javascript like this:

myElement.addEventListener('drop', handleDrop, false);

Then, inside handle drop I try to do this:

var myContainer = $(this.parentNode);
myContainer.after(myContainer.clone(true, true));

However, it appears that the event is not being carried over to the cloned element. Is this happening because I am not binding the event with jQuery also?

I tried to test this by binding the event with jQuery instead, but that doesn’t support the dataTransfer object so it broke other code.

Answer 1

One solution is to write your own wrapper for addEventListener that remembers the listeners which were added, so they can be “replayed”:

// set an event handler after memoizing it
function myAddEventListener(element, type, listener, useCapture) {
    // store listeners as an array under element.listeners
    if (!element.listeners) { element.listeners=[]; }

    // each element of the array is an array of arguments to addEventListener
    element.listeners[element.listeners.length] = 
        Array.prototype.slice.call(arguments,1);

    // apply listener to element itself
    element.addEventListener (type, listener, useCapture);
}

// copy a list of event handlers from one element to another
function copyEventListeners (from_element, to_element) {
    var i;
    if (from_element.listeners) {
        for (i=0; i<from_element.listeners.length; i++) {
          Element.addEventListener.apply (to_element, from_element.listeners[i]);
        }
    }
}

Then:

function clone_with_listeners (element) {
    var cloned_element = element.cloneNode();
    copyEventListeners (element, cloned_element);
    return cloned_element;
}

If you have no religious convictions preventing you from overwriting the original method on the Element object:

var orgAddEventListener = Element.addEventListener;

// our version of addEventListener
Element.addEventListener = function (type, listener, useCapture) {
    // store listeners as an array under element.listeners
    if (!this.listeners) { this.listeners=[]; }

    // each element of the array is an array of arguments to addEventListener
    this.listeners[element.listeners.length] = 
        Array.prototype.slice.call (arguments,0);

    // apply listener to element itself
    orgAddEventListener.call (element, type, listener, useCapture);
};

// copy a list of event handlers from this element to another
Element.copyEventListeners = function (to_element) {
    var i;
    if (from_element.listeners) {
        for (i=0; i<this.listeners.length; i++) {
            Element.addEventListener.apply (to_element, this.listeners[i]);
        }
    }
};

and then:

Element.cloneNode = function () {
  var cloned_element = this.cloneNode();
  this.copyEventListeners (cloned_element);
  return cloned_element;
};