RemoveEventListener in boot addon does not work when addon disabled

Question

I noticed that after disabling the boot add-in removeEventListener, it does not seem to remove the listener, and I cannot solve the reason.

let contextMenu = window.document.getElementById('contentAreaContextMenu');
if (contextMenu) {
  contextMenu.addEventListener('popupshowing', 
            this.contextPopupShowing.bind(this), false);
  // added this to make sure they refer to the same function
  console.log(this.contextPopupShowing.toString()); 
} 

And then disabling the addon

console.log(this.contextPopupShowing.toString()); // same as above
this.contextMenu.removeEventListener('popupshowing', 
            this.contextPopupShowing.bind(this), false);
// just showing that 'this' is working
this.contextMenu.removeChild(this.menuitem); 

Finally...

contextPopupShowing: function() { 
  // logs even after removeEventListener
  console.log('contextPopupShowing called'); 
  // more code
},

Answer 1

Because he bind's ed. What you have to do is:

When adding:

let contextMenu = window.document.getElementById('contentAreaContextMenu');
if (contextMenu) {
  this.contextPopupShowingBound = this.contextPopupShowing.bind(this);
  contextMenu.addEventListener('popupshowing', 
            this.contextPopupShowingBinded, false);
  // added this to make sure they refer to the same function
  console.log(this.contextPopupShowing.toString()); 
} 

And then disabling the addon

console.log(this.contextPopupShowing.toString()); // same as above
this.contextMenu.removeEventListener('popupshowing', 
            this.contextPopupShowingBound, false);
// just showing that 'this' is working
this.contextMenu.removeChild(this.menuitem); 

Finally...

contextPopupShowing: function() { 
  // logs even after removeEventListener
  console.log('contextPopupShowing called'); 
  // more code
},

You cannot use bindin removeEventListener, I'm sure.

See this great topic on the topic: Removing an Event Listener That Was Added with Binding