可以通过取消其回调函数来删除EventListener吗？

Question

I was wondering if an event listener can be removed by nullifying its callback function?

Simplified Example:

var somefunction = function() {
  // some code
}
window.addEventListener(eventType, somefunction, false); 

Now, will setting somefunction = null; remove the above EventListener, or will it simply turn it into a zombie EventListener?

The actual code is used in a Firefox (overlay-type) Addon and I was contemplating alternative methods of (automatically) removing EventListeners on unload event, other than the obvious:

window.removeEventListener(eventType, somefunction, false); 

Update: Please note that this is part of a code for a Firefox addon. The eventType in this instance is 'popupshowing' which can not be nullified as it would disrupt browser functions.

Thank you in advance for your help Looking forward to (alternative) suggestions

Answer 1

removeEventListener is the way to go.

Also, you don't actually nullify the function by setting some variable to null . The variable has assigned just a reference (to a non-POD object, like a function). To illustrate this, consider the following:

var a = function() { alert("called"); };
setTimeout(a, 1000); // Will still alert!

var b = a;

a = null; // What you called `nullify`....
console.log(this.a, "a" in this); // null, true
delete this.a; // Actually remove the property from the global scope.
// `a` is really dead at this point!

b(); // will still alert, too.

If you want to avoid some removeEventListener calls, I'd use some helper function(s):

let { addEventListenerUnload, removeEventListenerUnload } = (function() {
  let tracked = [];
  addEventListener("unload", function removeTracked() {
    removeEventListener("unload", removeTracked);
    for (let t of tracked) {
      try {
        removeEventListener(t.type, t.fn, t.capture);
      }
      catch (ex) {}
    }
    tracked.length = 0;
  });
  return {
    addEventListenerUnload: function(type, fn, capture) {
      addEventListener(type, fn, capture);
      tracked.push({type: type, fn: fn, capture: capture});
    },
    removeEventListenerUnload: function(type, fn, capture) {
      tracked = tracked.filter(e => e.type != type || e.fn != fn || e.capture != capture);
      removeEventListener(type, fn, capture);
    }
  };
})();

(Includes some ECMA-6 stuff that Firefox supports, but which you could easily convert. Also, removeEventListenerUnload might not be needed at all, so you might omit it. Also, when using this in overlay script make sure to give it unique names to avoid clashes with other code).

Answer 2

我不认为将回调函数设置为null会删除eventlistener，您仍然会附加eventlistener，可以使用removeEventListener或将eventType设置为null，例如：

window.eventType = null;