绑定函数删除自身
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);
}
}
我需要在转换结束时收听一个元素来做一些事情,比如添加/删除 类。
现在的问题是,当我使用 .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);
}
}