javascript - 无法使用 JavaScript 删除事件监听器

Question

请告诉我，为什么removeEvent 不起作用，并且在调用removeEventListener 后单击主体起作用。我只是为了更好地理解而使其更简单
p - 我的对象，具有属性和方法；
p.is_open - true/false 属性；
p.switcher - DOM 元素；

function MyClassname(){
  .......
  p.switcher.onclick = function(e){
    if(p.is_open){
      p.close();
      document.body.removeEventListener('click', p.close.bind(p));
    }else{
      p.open();
      document.body.addEventListener('click', p.close.bind(p));
    };
    e.stopPropagation();
  };
  .......
};
.......
MyClassname.prototype.close = function(){
  var p = this;
  p.is_open = false;
  p.switcher.className = 'closed';
};
MyClassname.prototype.open = function(){
  var p = this;
  p.is_open = true;
  p.switcher.className = 'open';
};

我可以用另一种方式解决这个任务，但我想解决这个问题。谢谢。

Answer 1

您无法删除事件监听器，因为您必须将 p.close.bind(p) 存储在变量中。
像这样的事情:

function MyClassname(){
  var closeHandler = p.close.bind(p);
  .......
  p.switcher.onclick = function(e){
    if(p.is_open){
      p.close();
      document.body.removeEventListener('click', closeHandler);
    }else{
      p.open();
      document.body.addEventListener('click', closeHandler);
    };
    e.stopPropagation();
  };
  .......
};
.......
MyClassname.prototype.close = function(){
  var p = this;
  p.is_open = false;
  p.switcher.className = 'closed';
};
MyClassname.prototype.open = function(){
  var p = this;
  p.is_open = true;
  p.switcher.className = 'open';
};

位p.close.bind(p)将创建一个具有相同主体的新函数。
它是一个全新的对象。比较 2 个不同的对象会返回 false。

部分引用 MDN 关于 the .bind() method 的内容:

The bind() method creates a new function that, when called, has its this keyword set to the provided value [...].

<小时/>

这是一个例子:

var button = document.getElementsByTagName('button')[0];

var handler = function(){
  console.log('click');
  //this refers to the button
  this.removeEventListener('click', handler.bind(this));
};

button.addEventListener('click', handler.bind(button));

<button>Click me</button>

如您所见，点击声保持在那里。这是另一个例子:

var button = document.getElementsByTagName('button')[0];

var handler = (function(){
  console.log('click');
  //this refers to the button
  this.removeEventListener('click', handler);
}).bind(button);

button.addEventListener('click', handler);

<button>Click me</button>

将 .bind() 的结果存储在变量中可以让您按照自己的意愿进行操作，并且您引用的是完全相同的对象。