youtube-api removeEventListener 不工作答案

【问题标题】：youtube-api removeEventListener not workingyoutube-api removeEventListener 不工作
【发布时间】：2014-09-17 00:43:39
【问题描述】：

我可以很好地添加事件。

addEventListener("onStateChange", "handleStateChange");

但是当试图删除事件时，它没有。

removeEventListener("onStateChange", "handleStateChange");

handleStateChange 仍然在我暂停/播放视频时被调用。有没有人遇到这个并有解决方案？还是 API 有错误？

【问题讨论】：

标签： events youtube event-handling youtube-api

【解决方案1】：

我认为问题在于 YouTube API 的播放器对象没有 removeEventListener 方法。请记住，当您调用 addEventListener 时，您是作为构造的 youtube 播放器对象的方法而不是使用定义为 DOM 元素的方法的方法（YouTube API 选择将它们的方法命名为相同以便开发人员更熟悉）。

过去对其他人有用的一个建议是，当您处于可能需要删除事件侦听器的情况时，您只需重新定义您的状态更改回调......类似于：

handleStateChange = function() {};

【讨论】：

但是，变更日志显示该方法是在 2014 年 4 月 28 日添加的 developers.google.com/youtube/… 如果我仍然无法使其工作，我相信您建议的方法会起作用。谢谢
嗯……我想我在更新日志中错过了；但是您说它根本不起作用是绝对正确的；我已经尝试过 API 公开的所有不同事件。您可能想提交一个错误：code.google.com/p/gdata-issues/issues/… ...无论如何，这种解决方法应该可以满足您的需求，直到工程师弄明白为止。
在 2018 年仍然是一个问题
2019 年 3 月仍然是一个问题。如果上述建议不起作用。

【解决方案2】：

这对我的应用程序来说已经够麻烦了，所以我为 YouTube 播放器对象制作了一种事件发射代理。

用法（player 是您的 YouTube Iframe API 播放器实例）：

const playerEventProxy = new YouTubeEventProxy(player);

function handleStateChange(e) {
  // …
}

playerEventProxy.on('stateChange', handleStateChange);
playerEventProxy.off('stateChange', handleStateChange);

类：

/**
 * YouTubeEventProxy
 * Quick and dirty hack around broken event handling in the YouTube Iframe API.
 * Events are renamed, dropping the "on" and lower-casing the first character.
 * Methods 'on', 'off', etc. are supported, as-provided by event-emitter.
 * See also:  https://stackoverflow.com/q/25880573/362536
 * 
 * Brad Isbell <brad@audiopump.co>
 * License: MIT <https://opensource.org/licenses/MIT>
 */

import EventEmitter from 'event-emitter';

// From: https://developers.google.com/youtube/iframe_api_reference#Events
const ytApiEvents = [
  'onApiChange',
  'onError',
  'onPlaybackQualityChange',
  'onPlaybackRateChange',
  'onReady',
  'onStateChange'
];

export default class YouTubeEventProxy extends EventEmitter {
  constructor(player) {
    super();

    this.player = player;

    ytApiEvents.forEach((eventName) => {
      player.addEventListener(
        eventName,
        this.emit.bind(
          this,
          eventName.substr(2, 1).toLowerCase() + eventName.substr(3)
        )
      );
    });

  }
}

这是event-emitter 包：https://www.npmjs.com/package/event-emitter

【讨论】：

另外需要注意的是，有时 YouTube 播放器会在同一个同步代码块中触发多个事件。发生这种情况，例如当调用nextVideo() 时，会触发暂停和未启动状态更改。例如，如果使用反应钩子，这可能会导致头痛。可以通过将this.emit.bind...-line 更改为：e => setTimeout(() => this.emit(eventName.substr(2, 1).toLowerCase() + eventName.substr(3), e), 0), 来解决