Fenster entfernen eventListener Größenänderungsfunktion

Question

Eine Funktion, die einige Dinge beim Laden oder Ändern der Fenstergröße ausführt. Sobald etwas passiert ist, brauche ich den window.resize Ereignis-Listener nicht mehr, also habe ich versucht, die resize event listener zu entfernen, aber ich bekomme es nicht zur Arbeit.

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>

Also, wenn div.blubb einmal Orange geändert würde Ich mag die Ereignis-Listener entfernen, die ich versucht habe, mit:

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

Aber Bei der Größenänderung sehe ich, dass das Ereignis nicht entfernt wird. Was mache ich falsch?

Answer 1

Um Ereignis-Listener zu entfernen, die mit bind() hinzugefügt wurden, müssen Sie nur listener.bind(this) in einer Variablen speichern. Denn bind() erstellt jedes Mal eine neue Referenz, wenn sie aufgerufen wird.

So könnte man so etwas tun:

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

Answer 2

nicht Verschluss verwenden, nur eine Funktion erstellen, dann für beide Hinzufügen und Entfernen Ereignis, so etwas wie dieses

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 hier: https://output.jsbin.com/vuyuvohure

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