将 JS 事件从一个元素复制到另一个元素答案

【问题标题】：Copying JS events from one element to another将 JS 事件从一个元素复制到另一个元素
【发布时间】：2014-02-24 08:47:38
【问题描述】：

我正在尝试使用纯 JS（即不是 JQuery）将事件从一个元素复制到另一个元素。

我遇到的错误是，当有多个事件时，最后一个事件用于两者。

有点难解释，请参考我的jsbin example，我想将#foo的mousedown和mouseup事件复制到#bar。错误是，#bar 元素上的 mouseup 和 mousedown 都会触发 mouseup 事件。

这是我目前正在使用的代码 sn-p，用于复制事件。

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); };
    }
  }
}

【问题讨论】：

直接分配函数toEl[event] = func。 jsbin.com/wowap/1/edit

标签： javascript events javascript-events

【解决方案1】：

您示例中的 JSHint 警告应该为您提供有关正在发生的事情的提示：

不要在循环中创建函数

问题的根源是the JavaScript infamous loop issue。

如果您使用 forEach 循环，则在引入新范围时完全避免此问题：

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

但您不需要匿名函数。如果您只是直接分配函数，则可以保留当前代码：

toEl[event] = func;

这会起作用，因为this 是动态的，在调用函数时解析。

演示： http://jsbin.com/wowap/1/edit

【讨论】：

太好了，谢谢！我不敢相信我从 toEl[event] = func; 身边走过。

【解决方案2】：

当您复制函数时，您还将复制函数的元素与您复制的元素提供给相同的this 对象。所以它会同时触发它们。

您需要单独分配它们而不是复制功能。

【讨论】：