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)

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

因此，如果div.blubb一旦更改为橙色，我想删除我尝试过的事件监听器：

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

但是在调整大小时，我发现事件未被删除。我做错了什么？

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

窗口删除eventListener调整大小函数

2 个答案: