我如何为addEventListener创建一个包装函数，与removeEventListener一起工作？

Question

我想为addEventListener创建一个包装函数，以便与 addEventListener 我可以这样调用。

aEvt('click', document, function (evt, target) {
  //Code here
});

我想这样做是因为它可以让我从一开始就把事件目标作为一个参数来使用。我尝试了这样一个函数，但问题是，为了让它与 removeEventListener (或我的类似 rEvt 函数），我必须返回一个来自 aEvt 函数，并将其传递给 removeEventListener 作为回调。

的 aEvt 我目前的函数如下。

function aEvt(evt, elem, fn) {
  'use strict';

  var callback = function (evt) {
    fn(evt, evt && evt.target ? evt.target : window.event.srcElement);
  };

  if (elem.addEventListener) {
    elem.addEventListener(evt, callback);
  } else if (elem.attachEvent) {
    elem.attachEvent('on' + evt, callback);
  } else {
    elem['on' + evt] = callback;
  }

  return callback;
}

有什么办法可以改变 aEvt 函数，这样我就可以将目标发送到传递给 aEvt 函数（即 fn)，但也有我发送的回调到的 aEvt 函数的回调，与我发送给类似的 rEvt 我想写的函数？换句话说，我应该如何改变 aEvt 如何使下面的工作正常进行？

var callbackFn = function (evt, target) { console.log(target); };
aEvt('click', document, callbackFn);
rEvt('click', document, callbackFn);

Answer 1

Felix Kling，非常感谢你在评论中链接到的SO帖子中的回答。

我采用了你的做法，并稍作修改，以1）遵循我所在组织的JS代码标准，2）使我可以在处理程序回调中以参数形式获得事件目标。有了目标作为参数，在我的大多数用例中处理事件就变得容易多了，同时也大大减少了重构的工作量。

总之，下面是最终的代码（请注意，在这个代码中的 each 作用于 remove 执行一个简单的for循环，而 return false 在函数中基本上打破了循环）。)

var evts = (function () {
  'use strict';

  var listeners = [],
    add,
    remove;

  add = function (evt, elem, fn) {
    var callback = function (evt) {
      fn(evt, evt && evt.target ? evt.target : window.event.srcElement);
    };

    listeners.push({
      evt: evt,
      elem: elem,
      fn: fn,
      callback: callback,
      removed: false
    });

    if (elem.addEventListener) {
      elem.addEventListener(evt, callback);
    } else if (elem.attachEvent) {
      elem.attachEvent('on' + evt, callback);
    } else {
      elem['on' + evt] = callback;
    }
  };

  remove = function (evt, elem, fn) {
    var callback;

    each(listeners, function (evtObj) {
      if (evtObj.evt === evt && evtObj.elem === elem && 
          evtObj.fn === fn && !evtObj.removed) {
        evtObj.removed = true;
        callback = evtObj.callback;
        return false;
      }
    });

    if (elem.removeEventListener) {
      elem.removeEventListener(evt, callback);
    } else if (elem.detachEvent) {
      elem.detachEvent('on' + evt, callback);
    } else {
      elem['on' + evt] = null;
    }
  };

  return {
    add: add,
    remove: remove
  };
}());

下面是一个使用这些方法的例子。

var callback = function (evt, target) {
  console.log(target);
};
evts.add('click', document, callback);
evts.remove('click', document, callback);