perf: wrap prototype methods in handlers in an arrow function (#7060)

src/js/big-play-button.js

@@ -18,7 +18,7 @@ class BigPlayButton extends Button {
 
     this.mouseused_ = false;
 
-    this.on('mousedown', this.handleMouseDown);
+    this.on('mousedown', (e) => this.handleMouseDown(e));
   }
 
   /**

src/js/clickable-component.js

@@ -30,6 +30,11 @@ class ClickableComponent extends Component {
   constructor(player, options) {
     super(player, options);
 
+    this.handleMouseOver_ = (e) => this.handleMouseOver(e);
+    this.handleMouseOut_ = (e) => this.handleMouseOut(e);
+    this.handleClick_ = (e) => this.handleClick(e);
+    this.handleKeyDown_ = (e) => this.handleKeyDown(e);
+
     this.emitTapEvents();
 
     this.enable();
@@ -156,8 +161,8 @@ class ClickableComponent extends Component {
       if (typeof this.tabIndex_ !== 'undefined') {
         this.el_.setAttribute('tabIndex', this.tabIndex_);
       }
-      this.on(['tap', 'click'], this.handleClick);
-      this.on('keydown', this.handleKeyDown);
+      this.on(['tap', 'click'], this.handleClick_);
+      this.on('keydown', this.handleKeyDown_);
     }
   }
 
@@ -171,10 +176,10 @@ class ClickableComponent extends Component {
     if (typeof this.tabIndex_ !== 'undefined') {
       this.el_.removeAttribute('tabIndex');
     }
-    this.off('mouseover', this.handleMouseOver);
-    this.off('mouseout', this.handleMouseOut);
-    this.off(['tap', 'click'], this.handleClick);
-    this.off('keydown', this.handleKeyDown);
+    this.off('mouseover', this.handleMouseOver_);
+    this.off('mouseout', this.handleMouseOut_);
+    this.off(['tap', 'click'], this.handleClick_);
+    this.off('keydown', this.handleKeyDown_);
   }
 
   /**

src/js/control-bar/fullscreen-toggle.js

@@ -23,7 +23,7 @@ class FullscreenToggle extends Button {
    */
   constructor(player, options) {
     super(player, options);
-    this.on(player, 'fullscreenchange', this.handleFullscreenChange);
+    this.on(player, 'fullscreenchange', (e) => this.handleFullscreenChange(e));
 
     if (document[player.fsApi_.fullscreenEnabled] === false) {
       this.disable();

src/js/control-bar/live-display.js

@@ -26,7 +26,7 @@ class LiveDisplay extends Component {
     super(player, options);
 
     this.updateShowing();
-    this.on(this.player(), 'durationchange', this.updateShowing);
+    this.on(this.player(), 'durationchange', (e) => this.updateShowing(e));
   }
 
   /**

src/js/control-bar/mute-toggle.js

@@ -29,7 +29,7 @@ class MuteToggle extends Button {
     // hide this control if volume support is missing
     checkMuteSupport(this, player);
 
-    this.on(player, ['loadstart', 'volumechange'], this.update);
+    this.on(player, ['loadstart', 'volumechange'], (e) => this.update(e));
   }
 
   /**

src/js/control-bar/picture-in-picture-toggle.js

@@ -26,8 +26,8 @@ class PictureInPictureToggle extends Button {
    */
   constructor(player, options) {
     super(player, options);
-    this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], this.handlePictureInPictureChange);
-    this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], this.handlePictureInPictureEnabledChange);
+    this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], (e) => this.handlePictureInPictureChange(e));
+    this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], (e) => this.handlePictureInPictureEnabledChange(e));
 
     // TODO: Deactivate button on player emptied event.
     this.disable();

src/js/control-bar/play-toggle.js

@@ -26,11 +26,11 @@ class PlayToggle extends Button {
     // show or hide replay icon
     options.replay = options.replay === undefined || options.replay;
 
-    this.on(player, 'play', this.handlePlay);
-    this.on(player, 'pause', this.handlePause);
+    this.on(player, 'play', (e) => this.handlePlay(e));
+    this.on(player, 'pause', (e) => this.handlePause(e));
 
     if (options.replay) {
-      this.on(player, 'ended', this.handleEnded);
+      this.on(player, 'ended', (e) => this.handleEnded(e));
     }
   }
 
@@ -128,7 +128,7 @@ class PlayToggle extends Button {
     this.controlText('Replay');
 
     // on the next seek remove the replay button
-    this.one(this.player_, 'seeked', this.handleSeeked);
+    this.one(this.player_, 'seeked', (e) => this.handleSeeked(e));
   }
 }
 

src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js

@@ -29,8 +29,8 @@ class PlaybackRateMenuButton extends MenuButton {
     this.updateVisibility();
     this.updateLabel();
 
-    this.on(player, 'loadstart', this.updateVisibility);
-    this.on(player, 'ratechange', this.updateLabel);
+    this.on(player, 'loadstart', (e) => this.updateVisibility(e));
+    this.on(player, 'ratechange', (e) => this.updateLabel(e));
   }
 
   /**

src/js/control-bar/playback-rate-menu/playback-rate-menu-item.js

@@ -35,7 +35,7 @@ class PlaybackRateMenuItem extends MenuItem {
     this.label = label;
     this.rate = rate;
 
-    this.on(player, 'ratechange', this.update);
+    this.on(player, 'ratechange', (e) => this.update(e));
   }
 
   /**

src/js/control-bar/progress-control/load-progress-bar.js

@@ -28,7 +28,7 @@ class LoadProgressBar extends Component {
   constructor(player, options) {
     super(player, options);
     this.partEls_ = [];
-    this.on(player, 'progress', this.update);
+    this.on(player, 'progress', (e) => this.update(e));
   }
 
   /**

src/js/control-bar/progress-control/progress-control.js

@@ -30,6 +30,8 @@ class ProgressControl extends Component {
     super(player, options);
     this.handleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
     this.throttledHandleMouseSeek = throttle(bind(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);
+    this.handleMouseUpHandler_ = (e) => this.handleMouseUp(e);
+    this.handleMouseDownHandler_ = (e) => this.handleMouseDown(e);
 
     this.enable();
   }
@@ -136,7 +138,7 @@ class ProgressControl extends Component {
       return;
     }
 
-    this.off(['mousedown', 'touchstart'], this.handleMouseDown);
+    this.off(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
     this.off(this.el_, 'mousemove', this.handleMouseMove);
 
     this.removeListenersAddedOnMousedownAndTouchstart();
@@ -167,7 +169,7 @@ class ProgressControl extends Component {
       return;
     }
 
-    this.on(['mousedown', 'touchstart'], this.handleMouseDown);
+    this.on(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
     this.on(this.el_, 'mousemove', this.handleMouseMove);
     this.removeClass('disabled');
 
@@ -182,8 +184,8 @@ class ProgressControl extends Component {
 
     this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
     this.off(doc, 'touchmove', this.throttledHandleMouseSeek);
-    this.off(doc, 'mouseup', this.handleMouseUp);
-    this.off(doc, 'touchend', this.handleMouseUp);
+    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.off(doc, 'touchend', this.handleMouseUpHandler_);
   }
 
   /**
@@ -205,8 +207,8 @@ class ProgressControl extends Component {
 
     this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
     this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
-    this.on(doc, 'mouseup', this.handleMouseUp);
-    this.on(doc, 'touchend', this.handleMouseUp);
+    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.on(doc, 'touchend', this.handleMouseUpHandler_);
   }
 
   /**

src/js/control-bar/progress-control/seek-bar.js

@@ -61,9 +61,12 @@ class SeekBar extends Slider {
     // via an interval
     this.updateInterval = null;
 
-    this.on(this.player_, ['playing'], this.enableInterval_);
+    this.enableIntervalHandler_ = (e) => this.enableInterval_(e);
+    this.disableIntervalHandler_ = (e) => this.disableInterval_(e);
 
-    this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableInterval_);
+    this.on(this.player_, ['playing'], this.enableIntervalHandler_);
+
+    this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
 
     // we don't need to update the play progress if the document is hidden,
     // also, this causes the CPU to spike and eventually crash the page on IE11.
@@ -446,8 +449,8 @@ class SeekBar extends Slider {
       this.on(this.player_.liveTracker, 'liveedgechange', this.update);
     }
 
-    this.off(this.player_, ['playing'], this.enableInterval_);
-    this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableInterval_);
+    this.off(this.player_, ['playing'], this.enableIntervalHandler_);
+    this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
 
     // we don't need to update the play progress if the document is hidden,
     // also, this causes the CPU to spike and eventually crash the page on IE11.

src/js/control-bar/seek-to-live.js

@@ -27,7 +27,8 @@ class SeekToLive extends Button {
     this.updateLiveEdgeStatus();
 
     if (this.player_.liveTracker) {
-      this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatus);
+      this.updateLiveEdgeStatusHandler_ = (e) => this.updateLiveEdgeStatus(e);
+      this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
     }
   }
 
@@ -84,7 +85,7 @@ class SeekToLive extends Button {
    */
   dispose() {
     if (this.player_.liveTracker) {
-      this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatus);
+      this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
     }
     this.textEl_ = null;
 

src/js/control-bar/time-controls/duration-display.js

@@ -23,20 +23,22 @@ class DurationDisplay extends TimeDisplay {
   constructor(player, options) {
     super(player, options);
 
+    const updateContent = (e) => this.updateContent(e);
+
     // we do not want to/need to throttle duration changes,
     // as they should always display the changed duration as
     // it has changed
-    this.on(player, 'durationchange', this.updateContent);
+    this.on(player, 'durationchange', updateContent);
 
     // Listen to loadstart because the player duration is reset when a new media element is loaded,
     // but the durationchange on the user agent will not fire.
     // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
-    this.on(player, 'loadstart', this.updateContent);
+    this.on(player, 'loadstart', updateContent);
 
     // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
     // listeners could have broken dependent applications/libraries. These
     // can likely be removed for 7.0.
-    this.on(player, 'loadedmetadata', this.updateContent);
+    this.on(player, 'loadedmetadata', updateContent);
   }
 
   /**

src/js/control-bar/time-controls/remaining-time-display.js

@@ -23,7 +23,7 @@ class RemainingTimeDisplay extends TimeDisplay {
    */
   constructor(player, options) {
     super(player, options);
-    this.on(player, 'durationchange', this.updateContent);
+    this.on(player, 'durationchange', (e) => this.updateContent(e));
   }
 
   /**

src/js/control-bar/time-controls/time-display.js

@@ -26,7 +26,7 @@ class TimeDisplay extends Component {
   constructor(player, options) {
     super(player, options);
 
-    this.on(player, ['timeupdate', 'ended'], this.updateContent);
+    this.on(player, ['timeupdate', 'ended'], (e) => this.updateContent(e));
     this.updateTextNode_();
   }
 

src/js/control-bar/volume-control/volume-bar.js

@@ -29,8 +29,8 @@ class VolumeBar extends Slider {
    */
   constructor(player, options) {
     super(player, options);
-    this.on('slideractive', this.updateLastVolume_);
-    this.on(player, 'volumechange', this.updateARIAAttributes);
+    this.on('slideractive', (e) => this.updateLastVolume_(e));
+    this.on(player, 'volumechange', (e) => this.updateARIAAttributes(e));
     player.ready(() => this.updateARIAAttributes());
   }
 

src/js/control-bar/volume-control/volume-control.js

@@ -41,10 +41,11 @@ class VolumeControl extends Component {
     checkVolumeSupport(this, player);
 
     this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+    this.handleMouseUpHandler_ = (e) => this.handleMouseUp(e);
 
-    this.on('mousedown', this.handleMouseDown);
-    this.on('touchstart', this.handleMouseDown);
-    this.on('mousemove', this.handleMouseMove);
+    this.on('mousedown', (e) => this.handleMouseDown(e));
+    this.on('touchstart', (e) => this.handleMouseDown(e));
+    this.on('mousemove', (e) => this.handleMouseMove(e));
 
     // while the slider is active (the mouse has been pressed down and
     // is dragging) or in focus we do not want to hide the VolumeBar
@@ -93,8 +94,8 @@ class VolumeControl extends Component {
 
     this.on(doc, 'mousemove', this.throttledHandleMouseMove);
     this.on(doc, 'touchmove', this.throttledHandleMouseMove);
-    this.on(doc, 'mouseup', this.handleMouseUp);
-    this.on(doc, 'touchend', this.handleMouseUp);
+    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.on(doc, 'touchend', this.handleMouseUpHandler_);
   }
 
   /**
@@ -111,8 +112,8 @@ class VolumeControl extends Component {
 
     this.off(doc, 'mousemove', this.throttledHandleMouseMove);
     this.off(doc, 'touchmove', this.throttledHandleMouseMove);
-    this.off(doc, 'mouseup', this.handleMouseUp);
-    this.off(doc, 'touchend', this.handleMouseUp);
+    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.off(doc, 'touchend', this.handleMouseUpHandler_);
   }
 
   /**

src/js/control-bar/volume-panel.js

@@ -4,7 +4,6 @@
 import Component from '../component.js';
 import {isPlain} from '../utils/obj';
 import * as Events from '../utils/events.js';
-import * as Fn from '../utils/fn.js';
 import keycode from 'keycode';
 import document from 'global/document';
 
@@ -45,12 +44,15 @@ class VolumePanel extends Component {
 
     super(player, options);
 
-    this.on(player, ['loadstart'], this.volumePanelState_);
-    this.on(this.muteToggle, 'keyup', this.handleKeyPress);
-    this.on(this.volumeControl, 'keyup', this.handleVolumeControlKeyUp);
-    this.on('keydown', this.handleKeyPress);
-    this.on('mouseover', this.handleMouseOver);
-    this.on('mouseout', this.handleMouseOut);
+    // this handler is used by mouse handler methods below
+    this.handleKeyPressHandler_ = (e) => this.handleKeyPress(e);
+
+    this.on(player, ['loadstart'], (e) => this.volumePanelState_(e));
+    this.on(this.muteToggle, 'keyup', (e) => this.handleKeyPress(e));
+    this.on(this.volumeControl, 'keyup', (e) => this.handleVolumeControlKeyUp(e));
+    this.on('keydown', (e) => this.handleKeyPress(e));
+    this.on('mouseover', (e) => this.handleMouseOver(e));
+    this.on('mouseout', (e) => this.handleMouseOut(e));
 
     // while the slider is active (the mouse has been pressed down and
     // is dragging) we do not want to hide the VolumeBar
@@ -153,7 +155,7 @@ class VolumePanel extends Component {
    */
   handleMouseOver(event) {
     this.addClass('vjs-hover');
-    Events.on(document, 'keyup', Fn.bind(this, this.handleKeyPress));
+    Events.on(document, 'keyup', this.handleKeyPressHandler_);
   }
 
   /**
@@ -168,7 +170,7 @@ class VolumePanel extends Component {
    */
   handleMouseOut(event) {
     this.removeClass('vjs-hover');
-    Events.off(document, 'keyup', Fn.bind(this, this.handleKeyPress));
+    Events.off(document, 'keyup', this.handleKeyPressHandler_);
   }
 
   /**

src/js/error-display.js

@@ -23,7 +23,7 @@ class ErrorDisplay extends ModalDialog {
    */
   constructor(player, options) {
     super(player, options);
-    this.on(player, 'error', this.open);
+    this.on(player, 'error', (e) => this.open(e));
   }
 
   /**

src/js/live-tracker.js

@@ -44,9 +44,16 @@ class LiveTracker extends Component {
 
     super(player, options_);
 
+    this.handleVisibilityChange_ = (e) => this.handleVisibilityChange(e);
+    this.trackLiveHandler_ = () => this.trackLive_();
+    this.handlePlay_ = (e) => this.handlePlay(e);
+    this.handleFirstTimeupdate_ = (e) => this.handleFirstTimeupdate(e);
+    this.handleSeeked_ = (e) => this.handleSeeked(e);
+    this.seekToLiveEdge_ = (e) => this.seekToLiveEdge(e);
+
     this.reset_();
 
-    this.on(this.player_, 'durationchange', this.handleDurationchange);
+    this.on(this.player_, 'durationchange', (e) => this.handleDurationchange(e));
     // we should try to toggle tracking on canplay as native playback engines, like Safari
     // may not have the proper values for things like seekableEnd until then
     this.one(this.player_, 'canplay', () => this.toggleTracking());
@@ -55,7 +62,7 @@ class LiveTracker extends Component {
     // also, tracking when the document is hidden can
     // cause the CPU to spike and eventually crash the page on IE11.
     if (browser.IE_VERSION && 'hidden' in document && 'visibilityState' in document) {
-      this.on(document, 'visibilitychange', this.handleVisibilityChange);
+      this.on(document, 'visibilitychange', this.handleVisibilityChange_);
     }
   }
 
@@ -155,16 +162,16 @@ class LiveTracker extends Component {
       this.timeupdateSeen_ = this.player_.hasStarted();
     }
 
-    this.trackingInterval_ = this.setInterval(this.trackLive_, Fn.UPDATE_REFRESH_INTERVAL);
+    this.trackingInterval_ = this.setInterval(this.trackLiveHandler_, Fn.UPDATE_REFRESH_INTERVAL);
     this.trackLive_();
 
-    this.on(this.player_, ['play', 'pause'], this.trackLive_);
+    this.on(this.player_, ['play', 'pause'], this.trackLiveHandler_);
 
     if (!this.timeupdateSeen_) {
-      this.one(this.player_, 'play', this.handlePlay);
-      this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate);
+      this.one(this.player_, 'play', this.handlePlay_);
+      this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
     } else {
-      this.on(this.player_, 'seeked', this.handleSeeked);
+      this.on(this.player_, 'seeked', this.handleSeeked_);
     }
   }
 
@@ -174,7 +181,7 @@ class LiveTracker extends Component {
    */
   handleFirstTimeupdate() {
     this.timeupdateSeen_ = true;
-    this.on(this.player_, 'seeked', this.handleSeeked);
+    this.on(this.player_, 'seeked', this.handleSeeked_);
   }
 
   /**
@@ -194,7 +201,7 @@ class LiveTracker extends Component {
    * right to the live edge.
    */
   handlePlay() {
-    this.one(this.player_, 'timeupdate', this.seekToLiveEdge);
+    this.one(this.player_, 'timeupdate', this.seekToLiveEdge_);
   }
 
   /**
@@ -213,11 +220,11 @@ class LiveTracker extends Component {
     this.clearInterval(this.trackingInterval_);
     this.trackingInterval_ = null;
 
-    this.off(this.player_, ['play', 'pause'], this.trackLive_);
-    this.off(this.player_, 'seeked', this.handleSeeked);
-    this.off(this.player_, 'play', this.handlePlay);
-    this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate);
-    this.off(this.player_, 'timeupdate', this.seekToLiveEdge);
+    this.off(this.player_, ['play', 'pause'], this.trackLiveHandler_);
+    this.off(this.player_, 'seeked', this.handleSeeked_);
+    this.off(this.player_, 'play', this.handlePlay_);
+    this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
+    this.off(this.player_, 'timeupdate', this.seekToLiveEdge_);
   }
 
   /**
@@ -378,7 +385,7 @@ class LiveTracker extends Component {
    * Dispose of liveTracker
    */
   dispose() {
-    this.off(document, 'visibilitychange', this.handleVisibilityChange);
+    this.off(document, 'visibilitychange', this.handleVisibilityChange_);
     this.stopTracking();
     super.dispose();
   }

src/js/menu/menu-button.js

@@ -5,7 +5,6 @@ import Button from '../button.js';
 import Component from '../component.js';
 import Menu from './menu.js';
 import * as Dom from '../utils/dom.js';
-import * as Fn from '../utils/fn.js';
 import * as Events from '../utils/events.js';
 import {toTitleCase} from '../utils/string-cases.js';
 import { IS_IOS } from '../utils/browser.js';
@@ -48,16 +47,20 @@ class MenuButton extends Component {
 
     this.enabled_ = true;
 
-    this.on(this.menuButton_, 'tap', this.handleClick);
-    this.on(this.menuButton_, 'click', this.handleClick);
-    this.on(this.menuButton_, 'keydown', this.handleKeyDown);
+    const handleClick = (e) => this.handleClick(e);
+
+    this.handleMenuKeyUp_ = (e) => this.handleMenuKeyUp(e);
+
+    this.on(this.menuButton_, 'tap', handleClick);
+    this.on(this.menuButton_, 'click', handleClick);
+    this.on(this.menuButton_, 'keydown', (e) => this.handleKeyDown(e));
     this.on(this.menuButton_, 'mouseenter', () => {
       this.addClass('vjs-hover');
       this.menu.show();
-      Events.on(document, 'keyup', Fn.bind(this, this.handleMenuKeyUp));
+      Events.on(document, 'keyup', this.handleMenuKeyUp_);
     });
-    this.on('mouseleave', this.handleMouseLeave);
-    this.on('keydown', this.handleSubmenuKeyDown);
+    this.on('mouseleave', (e) => this.handleMouseLeave(e));
+    this.on('keydown', (e) => this.handleSubmenuKeyDown(e));
   }
 
   /**
@@ -252,7 +255,7 @@ class MenuButton extends Component {
    */
   handleMouseLeave(event) {
     this.removeClass('vjs-hover');
-    Events.off(document, 'keyup', Fn.bind(this, this.handleMenuKeyUp));
+    Events.off(document, 'keyup', this.handleMenuKeyUp_);
   }
 
   /**

src/js/menu/menu.js

@@ -4,7 +4,6 @@
 import Component from '../component.js';
 import document from 'global/document';
 import * as Dom from '../utils/dom.js';
-import * as Fn from '../utils/fn.js';
 import * as Events from '../utils/events.js';
 import keycode from 'keycode';
 
@@ -35,11 +34,11 @@ class Menu extends Component {
 
     this.focusedChild_ = -1;
 
-    this.on('keydown', this.handleKeyDown);
+    this.on('keydown', (e) => this.handleKeyDown(e));
 
     // All the menu item instances share the same blur handler provided by the menu container.
-    this.boundHandleBlur_ = Fn.bind(this, this.handleBlur);
-    this.boundHandleTapClick_ = Fn.bind(this, this.handleTapClick);
+    this.boundHandleBlur_ = (e) => this.handleBlur(e);
+    this.boundHandleTapClick_ = (e) => this.handleTapClick(e);
   }
 
   /**

src/js/modal-dialog.js

@@ -58,6 +58,9 @@ class ModalDialog extends Component {
    */
   constructor(player, options) {
     super(player, options);
+
+    this.handleKeyDown_ = (e) => this.handleKeyDown(e);
+    this.close_ = (e) => this.close(e);
     this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
 
     this.closeable(!this.options_.uncloseable);
@@ -179,7 +182,7 @@ class ModalDialog extends Component {
         player.pause();
       }
 
-      this.on('keydown', this.handleKeyDown);
+      this.on('keydown', this.handleKeyDown_);
 
       // Hide controls and note if they were enabled.
       this.hadControls_ = player.controls();
@@ -242,7 +245,7 @@ class ModalDialog extends Component {
       player.play();
     }
 
-    this.off('keydown', this.handleKeyDown);
+    this.off('keydown', this.handleKeyDown_);
 
     if (this.hadControls_) {
       player.controls(true);
@@ -289,12 +292,12 @@ class ModalDialog extends Component {
         this.contentEl_ = this.el_;
         close = this.addChild('closeButton', {controlText: 'Close Modal Dialog'});
         this.contentEl_ = temp;
-        this.on(close, 'close', this.close);
+        this.on(close, 'close', this.close_);
       }
 
       // If this is being made uncloseable and has a close button, remove it.
       if (!closeable && close) {
-        this.off(close, 'close', this.close);
+        this.off(close, 'close', this.close_);
         this.removeChild(close);
         close.dispose();
       }

src/js/player.js

@@ -354,6 +354,17 @@ class Player extends Component {
     this.boundDocumentFullscreenChange_ = (e) => this.documentFullscreenChange_(e);
     this.boundFullWindowOnEscKey_ = (e) => this.fullWindowOnEscKey(e);
 
+    this.boundUpdateStyleEl_ = (e) => this.updateStyleEl_(e);
+    this.boundApplyInitTime_ = (e) => this.applyInitTime_(e);
+    this.boundUpdateCurrentBreakpoint_ = (e) => this.updateCurrentBreakpoint_(e);
+
+    this.boundHandleTechClick_ = (e) => this.handleTechClick_(e);
+    this.boundHandleTechDoubleClick_ = (e) => this.handleTechDoubleClick_(e);
+    this.boundHandleTechTouchStart_ = (e) => this.handleTechTouchStart_(e);
+    this.boundHandleTechTouchMove_ = (e) => this.handleTechTouchMove_(e);
+    this.boundHandleTechTouchEnd_ = (e) => this.handleTechTouchEnd_(e);
+    this.boundHandleTechTap_ = (e) => this.handleTechTap_(e);
+
     // default isFullscreen_ to false
     this.isFullscreen_ = false;
 
@@ -473,7 +484,7 @@ class Player extends Component {
     }
 
     if (this.fluid_) {
-      this.on(['playerreset', 'resize'], this.updateStyleEl_);
+      this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
     }
     // We also want to pass the original player options to each component and plugin
     // as well so they don't need to reach back into the player for options later.
@@ -552,10 +563,10 @@ class Player extends Component {
     this.userActive(true);
     this.reportUserActivity();
 
-    this.one('play', this.listenForUserActivity_);
-    this.on('stageclick', this.handleStageClick_);
-    this.on('keydown', this.handleKeyDown);
-    this.on('languagechange', this.handleLanguagechange);
+    this.one('play', (e) => this.listenForUserActivity_(e));
+    this.on('stageclick', (e) => this.handleStageClick_(e));
+    this.on('keydown', (e) => this.handleKeyDown(e));
+    this.on('languagechange', (e) => this.handleLanguagechange(e));
 
     this.breakpoints(this.options_.breakpoints);
     this.responsive(this.options_.responsive);
@@ -912,13 +923,13 @@ class Player extends Component {
     this.fluid_ = !!bool;
 
     if (isEvented(this)) {
-      this.off(['playerreset', 'resize'], this.updateStyleEl_);
+      this.off(['playerreset', 'resize'], this.boundUpdateStyleEl_);
     }
     if (bool) {
       this.addClass('vjs-fluid');
       this.fill(false);
       addEventedCallback(this, () => {
-        this.on(['playerreset', 'resize'], this.updateStyleEl_);
+        this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
       });
     } else {
       this.removeClass('vjs-fluid');
@@ -1173,7 +1184,7 @@ class Player extends Component {
 
     // Listen to all HTML5-defined events and trigger them on the player
     TECH_EVENTS_RETRIGGER.forEach((event) => {
-      this.on(this.tech_, event, this[`handleTech${toTitleCase(event)}_`]);
+      this.on(this.tech_, event, (e) => this[`handleTech${toTitleCase(event)}_`](e));
     });
 
     Object.keys(TECH_EVENTS_QUEUE).forEach((event) => {
@@ -1189,24 +1200,24 @@ class Player extends Component {
       });
     });
 
-    this.on(this.tech_, 'loadstart', this.handleTechLoadStart_);
-    this.on(this.tech_, 'sourceset', this.handleTechSourceset_);
-    this.on(this.tech_, 'waiting', this.handleTechWaiting_);
-    this.on(this.tech_, 'ended', this.handleTechEnded_);
-    this.on(this.tech_, 'seeking', this.handleTechSeeking_);
-    this.on(this.tech_, 'play', this.handleTechPlay_);
-    this.on(this.tech_, 'firstplay', this.handleTechFirstPlay_);
-    this.on(this.tech_, 'pause', this.handleTechPause_);
-    this.on(this.tech_, 'durationchange', this.handleTechDurationChange_);
-    this.on(this.tech_, 'fullscreenchange', this.handleTechFullscreenChange_);
-    this.on(this.tech_, 'fullscreenerror', this.handleTechFullscreenError_);
-    this.on(this.tech_, 'enterpictureinpicture', this.handleTechEnterPictureInPicture_);
-    this.on(this.tech_, 'leavepictureinpicture', this.handleTechLeavePictureInPicture_);
-    this.on(this.tech_, 'error', this.handleTechError_);
-    this.on(this.tech_, 'loadedmetadata', this.updateStyleEl_);
-    this.on(this.tech_, 'posterchange', this.handleTechPosterChange_);
-    this.on(this.tech_, 'textdata', this.handleTechTextData_);
-    this.on(this.tech_, 'ratechange', this.handleTechRateChange_);
+    this.on(this.tech_, 'loadstart', (e) => this.handleTechLoadStart_(e));
+    this.on(this.tech_, 'sourceset', (e) => this.handleTechSourceset_(e));
+    this.on(this.tech_, 'waiting', (e) => this.handleTechWaiting_(e));
+    this.on(this.tech_, 'ended', (e) => this.handleTechEnded_(e));
+    this.on(this.tech_, 'seeking', (e) => this.handleTechSeeking_(e));
+    this.on(this.tech_, 'play', (e) => this.handleTechPlay_(e));
+    this.on(this.tech_, 'firstplay', (e) => this.handleTechFirstPlay_(e));
+    this.on(this.tech_, 'pause', (e) => this.handleTechPause_(e));
+    this.on(this.tech_, 'durationchange', (e) => this.handleTechDurationChange_(e));
+    this.on(this.tech_, 'fullscreenchange', (e) => this.handleTechFullscreenChange_(e));
+    this.on(this.tech_, 'fullscreenerror', (e) => this.handleTechFullscreenError_(e));
+    this.on(this.tech_, 'enterpictureinpicture', (e) => this.handleTechEnterPictureInPicture_(e));
+    this.on(this.tech_, 'leavepictureinpicture', (e) => this.handleTechLeavePictureInPicture_(e));
+    this.on(this.tech_, 'error', (e) => this.handleTechError_(e));
+    this.on(this.tech_, 'posterchange', (e) => this.handleTechPosterChange_(e));
+    this.on(this.tech_, 'textdata', (e) => this.handleTechTextData_(e));
+    this.on(this.tech_, 'ratechange', (e) => this.handleTechRateChange_(e));
+    this.on(this.tech_, 'loadedmetadata', this.boundUpdateStyleEl_);
 
     this.usingNativeControls(this.techGet_('controls'));
 
@@ -1305,19 +1316,19 @@ class Player extends Component {
     // http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object
     // TODO: Is this needed for any techs other than Flash?
     // Any touch events are set to block the mousedown event from happening
-    this.on(this.tech_, 'mouseup', this.handleTechClick_);
-    this.on(this.tech_, 'dblclick', this.handleTechDoubleClick_);
+    this.on(this.tech_, 'mouseup', this.boundHandleTechClick_);
+    this.on(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
 
     // If the controls were hidden we don't want that to change without a tap event
     // so we'll check if the controls were already showing before reporting user
     // activity
-    this.on(this.tech_, 'touchstart', this.handleTechTouchStart_);
-    this.on(this.tech_, 'touchmove', this.handleTechTouchMove_);
-    this.on(this.tech_, 'touchend', this.handleTechTouchEnd_);
+    this.on(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+    this.on(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+    this.on(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
 
     // The tap listener needs to come after the touchend listener because the tap
     // listener cancels out any reportedUserActivity when setting userActive(false)
-    this.on(this.tech_, 'tap', this.handleTechTap_);
+    this.on(this.tech_, 'tap', this.boundHandleTechTap_);
   }
 
   /**
@@ -1329,12 +1340,12 @@ class Player extends Component {
   removeTechControlsListeners_() {
     // We don't want to just use `this.off()` because there might be other needed
     // listeners added by techs that extend this.
-    this.off(this.tech_, 'tap', this.handleTechTap_);
-    this.off(this.tech_, 'touchstart', this.handleTechTouchStart_);
-    this.off(this.tech_, 'touchmove', this.handleTechTouchMove_);
-    this.off(this.tech_, 'touchend', this.handleTechTouchEnd_);
-    this.off(this.tech_, 'mouseup', this.handleTechClick_);
-    this.off(this.tech_, 'dblclick', this.handleTechDoubleClick_);
+    this.off(this.tech_, 'tap', this.boundHandleTechTap_);
+    this.off(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
+    this.off(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
+    this.off(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
+    this.off(this.tech_, 'mouseup', this.boundHandleTechClick_);
+    this.off(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
   }
 
   /**
@@ -2474,8 +2485,8 @@ class Player extends Component {
       }
       if (!this.isReady_ || this.changingSrc_ || !this.tech_ || !this.tech_.isReady_) {
         this.cache_.initTime = seconds;
-        this.off('canplay', this.applyInitTime_);
-        this.one('canplay', this.applyInitTime_);
+        this.off('canplay', this.boundApplyInitTime_);
+        this.one('canplay', this.boundApplyInitTime_);
         return;
       }
       this.techCall_('setCurrentTime', seconds);
@@ -4584,12 +4595,12 @@ class Player extends Component {
     // Start listening for breakpoints and set the initial breakpoint if the
     // player is now responsive.
     if (value) {
-      this.on('playerresize', this.updateCurrentBreakpoint_);
+      this.on('playerresize', this.boundUpdateCurrentBreakpoint_);
       this.updateCurrentBreakpoint_();
 
     // Stop listening for breakpoints if the player is no longer responsive.
     } else {
-      this.off('playerresize', this.updateCurrentBreakpoint_);
+      this.off('playerresize', this.boundUpdateCurrentBreakpoint_);
       this.removeCurrentBreakpoint_();
     }
 

src/js/plugin.js

@@ -4,7 +4,6 @@
 import evented from './mixins/evented';
 import stateful from './mixins/stateful';
 import * as Events from './utils/events';
-import * as Fn from './utils/fn';
 import log from './utils/log';
 import Player from './player';
 
@@ -217,7 +216,7 @@ class Plugin {
 
     // Auto-bind the dispose method so we can use it as a listener and unbind
     // it later easily.
-    this.dispose = Fn.bind(this, this.dispose);
+    this.dispose = this.dispose.bind(this);
 
     // If the player is disposed, dispose the plugin.
     player.on('dispose', this.dispose);

src/js/poster-image.js

@@ -3,7 +3,6 @@
  */
 import ClickableComponent from './clickable-component.js';
 import Component from './component.js';
-import * as Fn from './utils/fn.js';
 import * as Dom from './utils/dom.js';
 import {silencePromise} from './utils/promise';
 import * as browser from './utils/browser.js';
@@ -28,14 +27,16 @@ class PosterImage extends ClickableComponent {
     super(player, options);
 
     this.update();
-    player.on('posterchange', Fn.bind(this, this.update));
+
+    this.update_ = (e) => this.update(e);
+    player.on('posterchange', this.update_);
   }
 
   /**
    * Clean up and dispose of the `PosterImage`.
    */
   dispose() {
-    this.player().off('posterchange', this.update);
+    this.player().off('posterchange', this.update_);
     super.dispose();
   }
 

src/js/slider/slider.js

@@ -28,6 +28,13 @@ class Slider extends Component {
   constructor(player, options) {
     super(player, options);
 
+    this.handleMouseDown_ = (e) => this.handleMouseDown(e);
+    this.handleMouseUp_ = (e) => this.handleMouseUp(e);
+    this.handleKeyDown_ = (e) => this.handleKeyDown(e);
+    this.handleClick_ = (e) => this.handleClick(e);
+    this.handleMouseMove_ = (e) => this.handleMouseMove(e);
+    this.update_ = (e) => this.update(e);
+
     // Set property names to bar to match with the child Slider class is looking for
     this.bar = this.getChild(this.options_.barName);
 
@@ -55,10 +62,10 @@ class Slider extends Component {
       return;
     }
 
-    this.on('mousedown', this.handleMouseDown);
-    this.on('touchstart', this.handleMouseDown);
-    this.on('keydown', this.handleKeyDown);
-    this.on('click', this.handleClick);
+    this.on('mousedown', this.handleMouseDown_);
+    this.on('touchstart', this.handleMouseDown_);
+    this.on('keydown', this.handleKeyDown_);
+    this.on('click', this.handleClick_);
 
     // TODO: deprecated, controlsvisible does not seem to be fired
     this.on(this.player_, 'controlsvisible', this.update);
@@ -82,15 +89,15 @@ class Slider extends Component {
     }
     const doc = this.bar.el_.ownerDocument;
 
-    this.off('mousedown', this.handleMouseDown);
-    this.off('touchstart', this.handleMouseDown);
-    this.off('keydown', this.handleKeyDown);
-    this.off('click', this.handleClick);
-    this.off(this.player_, 'controlsvisible', this.update);
-    this.off(doc, 'mousemove', this.handleMouseMove);
-    this.off(doc, 'mouseup', this.handleMouseUp);
-    this.off(doc, 'touchmove', this.handleMouseMove);
-    this.off(doc, 'touchend', this.handleMouseUp);
+    this.off('mousedown', this.handleMouseDown_);
+    this.off('touchstart', this.handleMouseDown_);
+    this.off('keydown', this.handleKeyDown_);
+    this.off('click', this.handleClick_);
+    this.off(this.player_, 'controlsvisible', this.update_);
+    this.off(doc, 'mousemove', this.handleMouseMove_);
+    this.off(doc, 'mouseup', this.handleMouseUp_);
+    this.off(doc, 'touchmove', this.handleMouseMove_);
+    this.off(doc, 'touchend', this.handleMouseUp_);
     this.removeAttribute('tabindex');
 
     this.addClass('disabled');
@@ -168,10 +175,10 @@ class Slider extends Component {
      */
     this.trigger('slideractive');
 
-    this.on(doc, 'mousemove', this.handleMouseMove);
-    this.on(doc, 'mouseup', this.handleMouseUp);
-    this.on(doc, 'touchmove', this.handleMouseMove);
-    this.on(doc, 'touchend', this.handleMouseUp);
+    this.on(doc, 'mousemove', this.handleMouseMove_);
+    this.on(doc, 'mouseup', this.handleMouseUp_);
+    this.on(doc, 'touchmove', this.handleMouseMove_);
+    this.on(doc, 'touchend', this.handleMouseUp_);
 
     this.handleMouseMove(event);
   }
@@ -215,10 +222,10 @@ class Slider extends Component {
      */
     this.trigger('sliderinactive');
 
-    this.off(doc, 'mousemove', this.handleMouseMove);
-    this.off(doc, 'mouseup', this.handleMouseUp);
-    this.off(doc, 'touchmove', this.handleMouseMove);
-    this.off(doc, 'touchend', this.handleMouseUp);
+    this.off(doc, 'mousemove', this.handleMouseMove_);
+    this.off(doc, 'mouseup', this.handleMouseUp_);
+    this.off(doc, 'touchmove', this.handleMouseMove_);
+    this.off(doc, 'touchend', this.handleMouseUp_);
 
     this.update();
   }

src/js/tech/tech.js

@@ -97,6 +97,12 @@ class Tech extends Component {
     options.reportTouchActivity = false;
     super(null, options, ready);
 
+    this.onDurationChange_ = (e) => this.onDurationChange(e);
+    this.trackProgress_ = (e) => this.trackProgress(e);
+    this.trackCurrentTime_ = (e) => this.trackCurrentTime(e);
+    this.stopTrackingCurrentTime_ = (e) => this.stopTrackingCurrentTime(e);
+    this.disposeSourceHandler_ = (e) => this.disposeSourceHandler(e);
+
     // keep track of whether the current source has played at all to
     // implement a very limited played()
     this.hasStarted_ = false;
@@ -194,12 +200,12 @@ class Tech extends Component {
    * @see {@link Tech#trackProgress}
    */
   manualProgressOn() {
-    this.on('durationchange', this.onDurationChange);
+    this.on('durationchange', this.onDurationChange_);
 
     this.manualProgress = true;
 
     // Trigger progress watching when a source begins loading
-    this.one('ready', this.trackProgress);
+    this.one('ready', this.trackProgress_);
   }
 
   /**
@@ -210,7 +216,7 @@ class Tech extends Component {
     this.manualProgress = false;
     this.stopTrackingProgress();
 
-    this.off('durationchange', this.onDurationChange);
+    this.off('durationchange', this.onDurationChange_);
   }
 
   /**
@@ -304,8 +310,8 @@ class Tech extends Component {
   manualTimeUpdatesOn() {
     this.manualTimeUpdates = true;
 
-    this.on('play', this.trackCurrentTime);
-    this.on('pause', this.stopTrackingCurrentTime);
+    this.on('play', this.trackCurrentTime_);
+    this.on('pause', this.stopTrackingCurrentTime_);
   }
 
   /**
@@ -315,8 +321,8 @@ class Tech extends Component {
   manualTimeUpdatesOff() {
     this.manualTimeUpdates = false;
     this.stopTrackingCurrentTime();
-    this.off('play', this.trackCurrentTime);
-    this.off('pause', this.stopTrackingCurrentTime);
+    this.off('play', this.trackCurrentTime_);
+    this.off('pause', this.stopTrackingCurrentTime_);
   }
 
   /**
@@ -1342,14 +1348,14 @@ Tech.withSourceHandlers = function(_Tech) {
 
     // Dispose any existing source handler
     this.disposeSourceHandler();
-    this.off('dispose', this.disposeSourceHandler);
+    this.off('dispose', this.disposeSourceHandler_);
 
     if (sh !== _Tech.nativeSourceHandler) {
       this.currentSource_ = source;
     }
 
     this.sourceHandler_ = sh.handleSource(source, this, this.options_);
-    this.one('dispose', this.disposeSourceHandler);
+    this.one('dispose', this.disposeSourceHandler_);
   };
 
   /**

src/js/tracks/text-track-display.js

@@ -99,11 +99,11 @@ class TextTrackDisplay extends Component {
   constructor(player, options, ready) {
     super(player, options, ready);
 
-    const updateDisplayHandler = Fn.bind(this, this.updateDisplay);
+    const updateDisplayHandler = (e) => this.updateDisplay(e);
 
-    player.on('loadstart', Fn.bind(this, this.toggleDisplay));
+    player.on('loadstart', (e) => this.toggleDisplay(e));
     player.on('texttrackchange', updateDisplayHandler);
-    player.on('loadedmetadata', Fn.bind(this, this.preselectTrack));
+    player.on('loadedmetadata', (e) => this.preselectTrack(e));
 
     // This used to be called during player init, but was causing an error
     // if a track should show by default and the display hadn't loaded yet.

src/js/tracks/text-track-settings.js

@@ -5,7 +5,6 @@ import window from 'global/window';
 import Component from '../component';
 import ModalDialog from '../modal-dialog';
 import {createEl} from '../utils/dom';
-import * as Fn from '../utils/fn';
 import * as Obj from '../utils/obj';
 import log from '../utils/log';
 
@@ -254,7 +253,7 @@ class TextTrackSettings extends ModalDialog {
     options.temporary = false;
 
     super(player, options);
-    this.updateDisplay = Fn.bind(this, this.updateDisplay);
+    this.updateDisplay = this.updateDisplay.bind(this);
 
     // fill the modal and pretend we have opened it
     this.fill();