Окно удалить функцию изменения размера событияListener

Question

Функция, выполняющая некоторые действия при загрузке или изменении размера окна. Как только что-то случилось, мне больше не нужен прослушиватель событий window.resize, поэтому я попытался удалить resize event listener, но я не заработал.

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

blubb = function(element) { 
 
\t 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(
 
\t 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>

Так что если div.blubb раз изменен на оранжевый я хотел бы, чтобы удалить слушателя событий, который я попытался с:

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

Но on resize Я вижу, что событие не удаляется. Что я делаю не так?

Answer 1

Чтобы удалить прослушиватель событий, который, если он добавлен с использованием bind(), вам просто нужно сохранить listener.bind(this) в переменной. Потому что bind() создает новую ссылку каждый раз при ее вызове.

Так что вы могли бы сделать что-то вроде этого:

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

Answer 2

не использовать замыкание, просто создать функцию, а затем использовать для обоих добавления и удаления события, что-то вроде этого

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

демо здесь: https://output.jsbin.com/vuyuvohure

код https://jsbin.com/vuyuvohure/edit?html,js,console