Copying JS events from one element to another

Question

I'm attempting to copy events from one element, to another using pure JS (i.e. not JQuery).

The bug I'm hitting, is when there's multiple events, the last event is used for both.

Bit hard to explain, please refer to my jsbin example, I want to copy the mousedown and mouseup events from #foo to #bar. The bug is, the mouseup event is fired for both mouseup and mousedown on the #bar element.

Here's the code snippet I'm currently working with, to copy events.

copyEvents(fromEl, toEl, ['onmousedown', 'onmouseup']);

function copyEvents(fromEl, toEl, events){
  for (var i = 0; i < events.length; i++){
    var event = events[i];
    var func = fromEl[events[i]];
    if(func){
      if (console){ console.log('Copying event - ' + event + ' = ' + func); }
      toEl[event] = function(evt){ func.call(this); };
    }
  }
}

Assign the function directly `toEl[event] = func`. http://jsbin.com/wowap/1/edit — elclanrs, Feb 24 '14 at 09:02

score 2 · Accepted Answer · edited May 23 '17 at 11:53

The JSHint warning on your example should give you a tip on what's happening:

Don't make functions within a loop

The root of your problem is the JavaScript infamous loop issue.

If you loop with forEach you avoid this issue altogether as you introduce a new scope:

function copyEvents(fromEl, toEl, events){
  events.forEach(function(ev, i) {
    var func = fromEl[ev];
    if(func){
      toEl[ev] = function(evt){ func.call(this); };
    }
  });
}

But you don't need an anonymous function. You can keep your current code if you simply assign the function directly:

toEl[event] = func;

That will work because this is dynamic, resolved when the function is called.

Demo: http://jsbin.com/wowap/1/edit

Excellent, thank you! I can't believe I walked right past `toEl[event] = func;`. — Nick Grealy, Feb 24 '14 at 11:10

score 0 · Answer 2 · answered Feb 24 '14 at 08:54

When you copy over the function(s) you also give the element which you copied the functions to the same this object as the element you copy from. So it triggers on both of them.

You need to assign them individually instead of copying the functionality.

Copying JS events from one element to another

2 Answers2