gpt4 book ai didi

javascript - 如何删除在 TypeScript 中使用 "this"的事件监听器?

转载 作者:可可西里 更新时间:2023-11-01 01:38:44 26 4
gpt4 key购买 nike

在 JavaScript 中,对于需要访问私有(private)成员和函数的事件处理程序,我可以依赖那些在我的事件处理程序函数中可访问的函数范围,并执行如下操作:

theElement.addEventListener("click", onClick);

及以后:

theElement.removeEventListener("click", onClick);

在 TypeScript 中,我需要使用匿名函数让 this 成为包含对象,如下所示:

theElement.addEventListener("click", (event) => this.onClick(event));

在这种情况下,我无法从监听事件中移除匿名函数。我如何将事件监听器作为类的一部分(可以访问私有(private)字段和方法),以便稍后删除?

最佳答案

首先,JavaScript 和 TypeScript 的行为方式完全相同,即使您这样写也是如此:

theElement.addEventListener("click", onClick);

其次,这是您可以保留对匿名函数的引用的方法:

var f = (event) => this.onClick(event);
theElement.addEventListener("click", f);
// later
theElement.removeEventListener("click", f);

如果您正在处理事件监听器,那么有一个有用的模式可以绑定(bind)您的类方法:

class MyClass {
init(theElement) {
theElement.addEventListener("click", this.onClick);
theElement.addEventListener("click", this.onClick2);
}
print() {
console.log("print");
}
onClick() {
this.print() // possible error (`this` is not guaranteed to be MyClass)
}

onClick2 = () => {
this.print() // no error, `this` is guaranteed to be of type MyClass
}
}

但是请记住,此代码将为 MyClass 类的每个对象创建一个单独的函数 onClick2。如果您创建大量 MyClass 实例并且很少使用它们的 onClick 监听器,这会对您的内存使用产生负面影响。

关于javascript - 如何删除在 TypeScript 中使用 "this"的事件监听器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38023688/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com