Window remove eventListener resize function

Question

Having a function doing some things on window load or resize. As soon as something happend I don't need the window.resize event listener any more so I tried to remove the resize event listener but I don't get it to work.

Code below is same as in this jsFiddle (you need to resize window so not really possible on stackoverflow code snippet)

 blubb = function(element) { this.element = element; this.blubber = function() { document.querySelector('.data').innerHTML = window.innerWidth + 'px'; if(window.innerWidth < 800) { this.element.style.backgroundColor = 'orange'; // here remove EventListener // is not working window.removeEventListener('resize', (function() { this.blubber() }).bind(this)); } else { this.element.style.backgroundColor = 'powderblue'; } }; this.blubber(); window.addEventListener('resize', (function() { this.blubber() }).bind(this)); }; blubb( document.querySelector('.blubb') ); 

 .blubb { width: 300px; height: 300px; background-color: powderblue; } 

 <h1>Change visible area size and reload</h1> <p>Should be once above 800px and once below 800px</p> <div class="data"></div> <div class="blubb"></div> 

So if div.blubb once changed to orange I would like to remove the event listener which I've tried with:

window.removeEventListener('resize', (function() { this.blubber() }).bind(this));

But on resize I see the event is not removed. What am I doing wrong?

Answer 1

To remove event listener which where added using bind() you just have to store listener.bind(this) in a variable. Because bind() is creating a new reference each time its called.

So you could do something like this:

var myListener = function(event) { 
... 
};
var myListenerWithContext = myListener.bind(this);
element.addEventListener('event', myListenerWithContext);
element.removeEventListener('event', myListenerWithContext);

Answer 2

do not use closure, just create a function, then use for both of add and remove event, something like this

var blubb = function(element) {
  var evt;
  this.blubber = function() {
    // code...
    if(window.innerWidth < 800) {
      window.removeEventListener('resize', evt);
    }
  };

  evt = this.blubber.bind(this);
  window.addEventListener('resize', evt);
};

demo here: https://output.jsbin.com/vuyuvohure

code https://jsbin.com/vuyuvohure/edit?html,js,console