Tutorial: event-target | Video.js Documentation

Event Target

概述

Video.js 中的 Events 事件是经过设置的，它们模仿对象上使用的 DOM API，提供具有相同功能的，简介有用的方法。

on() 和 addEventListener()

此方法用于向 EventTarget 上添加一个事件侦听器。

var foo = new EventTarget();
var handleBar = function(event) {
  // event 事件对象，可通过 event.target.player 获取当前播放器实例
  console.log('bar was triggered');
};
foo.on('bar', handleBar);
// 这会导致调用任何 `bar` 事件上的事件侦听器
// 更多请参阅 https://docs.videojs.com/eventtarget#trigger
foo.trigger('bar');
// 输出 'bar was triggered'

off() 和 removeEventListener()

此方法用于从 EventTarget 上删除侦听器函数。

var foo = new EventTarget();
var handleBar = function() {
  console.log('bar was triggered');
};
// 为 `bar` 事件添加一个事件侦听器
// 更多请参阅 https://docs.videojs.com/eventtarget#on
foo.on('bar', handleBar);
// 运行所有 `bar` 事件上的事件侦听器
// 更多请参阅 https://docs.videojs.com/eventtarget#trigger
foo.trigger('bar');
// 输出 'bar was triggered'
foo.off('bar', handleBar);
foo.trigger('bar');
// does nothing

one()

此方法仅用于让事件侦听器调用一次，而不再调用。

使用 on() 和 off 模拟 one()（不推荐）：

var foo = new EventTarget();
var handleBar = function() {
  console.log('bar was triggered');
  // 在首次触发后删除这个处理函数
  foo.off('bar', handleBar);
};
foo.on('bar', handleBar);
foo.trigger('bar');
// 输出 'bar was triggered'
foo.trigger('bar');
// does nothing

使用 one()：

var foo = new EventTarget();
var handleBar = function() {
  console.log('bar was triggered');
};
// 首次触发后被删除
foo.one('bar', handleBar);
foo.trigger('bar');
// 输出 'bar was triggered'
foo.trigger('bar');
// does nothing

trigger() 和 dispatchEvent()

此方法用于触发 EventTarget 上的一个事件，它将运行所有侦听器。

注意：如果 EventTarget.allowedEvents_ 中有 click，触发器将尝试调用 onClick 函数（如果它存在）。

var foo = new EventTarget();
var handleBar = function() {
  console.log('bar was triggered');
};
foo.on('bar', handleBar);
foo.trigger('bar');
// logs 'bar was triggered'
foo.trigger('bar');
// logs 'bar was triggered'
foo.trigger('foo');
// does nothing