如何删除带参数的事件回调

Question

我有一个 Web 应用程序，页面 A 有视频，而页面 B 没有。当视频播放结束时，视频有 onended 事件。我试图在使用 removeEventListener 卸载组件之前删除该事件，否则将在我切换到页面 B 后触发视频结束事件。

但是，我找不到删除带参数的回调的正确方法。我使用了箭头函数和bind来传递参数，但是这两种方式导致无法移除事件。

componentDidMount() {
  // 1st trial: anonymous function cannot be removed
  this.video.onended = () => this.videoOnEndedCallback(params);
  // 2nd trial: bind() creates new function, cannot be referenced either
  this.video.onended = this.videoOnEndedCallback.bind(this, params);
}

componentWillUnmount() {
  this.video.removeEventListener('ended', this.videoOnEndedCallback);
}

最后，我将 onended 设置为 null，它起作用了。

componentWillUnmount() {
  this.video.onended = null;
}

问题

如果设置onended为null等于removeEventListener的效果?

如果不是，有没有其他正确的方法来删除带参数的回调？

Answer 1

如果事件侦听器是使用命名事件属性（在本例中为 .onended）设置的，则可以通过重新分配来更改它，也可以通过将其设置为 null 来删除它。（每个事件只能设置一个监听器。）

另一种方法，.addEventListener()，可以为同一个事件注册多个事件监听器，不能更改，只能通过.removeEventListener()删除（需要引用设置的监听器）。

这两种方式相互配合，但无论哪种方式，您都必须为每个侦听器选择要用于 adding/changing/removing 该侦听器的方法。

在你的情况下，使用事件侦听器更容易属性，就像你.bind()函数一样，你不会有对新函数的引用，所以你不会可以通过 .removeEventListener().

删除它

另一方面，如果你存储它的引用，你也可以使用.addEventListener()/.removeEventListener()方法：

constructor(){
  this.boundVideoOnEndedCallback = this.videoOnEndedCallback.bind(this, params); //You can also use the arrow-function-version here
}
componentDidMount() {
  this.video.addEventListener('ended', this.boundVideoOnEndedCallback)
}

componentWillUnmount() {
  this.video.removeEventListener('ended', this.boundVideoOnEndedCallback);
}

如何删除带参数的事件回调

How to remove event callback with parameters

javascript

dom-events

ecmascript-6

reactjs