如何为可与 removeEventListener 一起使用的 addEventListener 创建包装函数？

Question

I want to create a wrapper function for addEventListener that I can call as such:

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

I want to do this because it allows me to always have the event target available first from the start as a parameter.
I attempted such a function, but the problem is, in order to have it work with removeEventListener (or my analogous rEvt function), I have to return a callback from the aEvt function and pass that to removeEventListener as the callback.

The aEvt function I currently have is as follows:

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

Is there any way I can change the aEvt function so that I can send the target to the callback passed to the aEvt function (ie, fn ), but also have the callback I send to the aEvt function be the same callback that I send to the analogous rEvt function I want to write?
In other words, how should I change aEvt to make the following work?

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

Answer 1

Felix Kling, thanks a lot for your answer in the SO post you linked to in the comments.

I took what you did and modified it slightly to 1) follow the JS code standards set at my organization, and 2) make it so that I could get the event target as a parameter in the handler callback.
Having the target available as a parameter makes handling events a lot easier in a majority of the use cases I have as well as greatly minimizes the amount of refactoring required.

Anyway, here's the final code (please note that the each function in remove executes a simple for loop, and return false in the function essentially breaks the loop):

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

And here's an example of using the methods:

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