绑定函数删除自身

Bound function removing itself

我需要在转换结束时收听一个元素来做一些事情,比如添加/删除 类。

现在的问题是,当我使用 .bind() 时,它创建了一个新函数,但我想在 transitionend 事件自动触发时删除事件侦听器。这可能吗?

我的解决方法是现在我在外部有一个变量并将我的函数分配给它,在我的 someFunc 中我用 this.reference

删除它

let box = document.querySelector("div");

class test {
   constructor() {
      this.reference = null;
   }
   someFunc(box) {
      //do some stuff
      box.removeEventListener("transitionend", this.reference);
   }
   addHandler(box) {
      let func = this.someFunc.bind(this, box);
      this.reference = func;
      box.addEventListener("transitionend", func);
   }
}
<div></div>

随着我的应用程序的增长,很难在​​我的应用程序中保留概述,所以我想问一下是否有一种“自动”方式来删除事件处理程序?

根据which browsers you want to support,可以通过once选项:

let box = document.querySelector("div");

class test {
   constructor() {
      this.reference = null;
   }
   someFunc(box) {
      //do some stuff
   }
   addHandler(box) {
      let func = this.someFunc.bind(this, box);
      box.addEventListener("transitionend", func, {once: true});
   }
}

来自 MDN:

once
A Boolean indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.


您始终可以编写自己的辅助函数来执行相同的操作:

function once(element, type, handler) {
   function wrapper(event) {
      element.removeEventListener(type, wrapper);
      handler.call(this, event);
   }
   element.addEventListener(type, wrapper);
}

let box = document.querySelector("div");

class test {
   constructor() {
      this.reference = null;
   }
   someFunc(box) {
      //do some stuff
   }
   addHandler(box) {
      let func = this.someFunc.bind(this, box);
      once(box, "transitionend", func);
   }
}