Register multiple event listeners with the same callback in one call

src/js/events.js

@@ -5,17 +5,35 @@
  * robust as jquery's, so there's probably some differences.
  */
 
+/**
+ * Loops through an array of event types and calls the requested method for each type.
+ * @param  {Element|Object} elem Element or object to bind listeners to
+ * @param  {String}   type Type of event to bind to.
+ * @param  {Function} fn   Event listener.
+ * @param  {String}   method Event method (on, off, one).
+ */
+vjs.forwardMultipleEvents = function( elem, type, fn, method ) {
+    vjs.arrayForEach( type, function( type ) {
+      vjs[ method ](elem, type, fn); //Call the event method for each one of the types
+    });
+};
+
 /**
  * Add an event listener to element
  * It stores the handler function in a separate cache object
  * and adds a generic handler to the element's event,
  * along with a unique id (guid) to the element.
  * @param  {Element|Object}   elem Element or object to bind listeners to
- * @param  {String}   type Type of event to bind to.
+ * @param  {String|Array}   type Type of event to bind to.
  * @param  {Function} fn   Event listener.
  * @private
  */
 vjs.on = function(elem, type, fn){
+  if (type instanceof Array){
+    vjs.forwardMultipleEvents(elem, type, fn, 'on');
+    return false;
+  }
+
   var data = vjs.getData(elem);
 
   // We need a place to store all our handler data
@@ -64,7 +82,7 @@ vjs.on = function(elem, type, fn){
 /**
  * Removes event listeners from an element
  * @param  {Element|Object}   elem Object to remove listeners from
- * @param  {String=}   type Type of listener to remove. Don't include to remove all events from element.
+ * @param  {String|Array=}   type Type of listener to remove. Don't include to remove all events from element.
  * @param  {Function} fn   Specific listener to remove. Don't incldue to remove listeners for an event type.
  * @private
  */
@@ -77,6 +95,11 @@ vjs.off = function(elem, type, fn) {
   // If no events exist, nothing to unbind
   if (!data.handlers) { return; }
 
+  if (type instanceof Array){
+    vjs.forwardMultipleEvents(elem, type, fn, 'off');
+    return false;
+  }
+
   // Utility function
   var removeType = function(t){
      data.handlers[t] = [];
@@ -337,11 +360,15 @@ vjs.trigger = function(elem, event) {
 /**
  * Trigger a listener only once for an event
  * @param  {Element|Object}   elem Element or object to
- * @param  {String}   type
+ * @param  {String|Array}   type
  * @param  {Function} fn
  * @private
  */
 vjs.one = function(elem, type, fn) {
+  if (type instanceof Array){
+    vjs.forwardMultipleEvents(elem, type, fn, 'one');
+    return false;
+  }
   var func = function(){
     vjs.off(elem, type, func);
     fn.apply(this, arguments);

src/js/exports.js

@@ -111,6 +111,10 @@ goog.exportSymbol('videojs.SubtitlesButton', vjs.SubtitlesButton);
 goog.exportSymbol('videojs.CaptionsButton', vjs.CaptionsButton);
 goog.exportSymbol('videojs.ChaptersButton', vjs.ChaptersButton);
 
+goog.exportSymbol('videojs.on', vjs.on);
+goog.exportSymbol('videojs.off', vjs.off);
+goog.exportSymbol('videojs.one', vjs.one);
+
 goog.exportSymbol('videojs.MediaTechController', vjs.MediaTechController);
 goog.exportProperty(vjs.MediaTechController.prototype, 'features', vjs.MediaTechController.prototype.features);
 goog.exportProperty(vjs.MediaTechController.prototype.features, 'volumeControl', vjs.MediaTechController.prototype.features.volumeControl);

src/js/lib.js

@@ -832,3 +832,18 @@ vjs.findPosition = function(el) {
     top: vjs.round(top)
   };
 };
+
+/*
+ * Loops through an array and runs a function for each item inside it.
+ * @param  {Array}    array The array.
+ * @param  {Function} fn    The function to be run for each item. 
+ */
+vjs.arrayForEach = function(array, fn) {
+  if (!(array instanceof Array) || !(fn instanceof Function)) {
+    return false;
+  }
+
+  for (var i = 0, len = array.length; i < len; ++i) {
+    fn.apply( vjs, [array[i], i, array]);
+  }
+};

test/unit/events.js

@@ -14,6 +14,32 @@ test('should add and remove an event listener to an element', function(){
   vjs.trigger(el, 'click'); // No click should happen.
 });
 
+test('should add and remove multiple event listeners to an element with a single call', function(){
+  expect(6);
+
+  var el = document.createElement('div');
+  var listener = function(){
+    ok(true, 'Callback triggered');
+  };
+
+  vjs.on(el, [ 'click', 'event1', 'event2' ], listener);
+
+  vjs.trigger(el, 'click');
+  vjs.trigger(el, 'click');
+  vjs.off(el, 'click', listener);
+  vjs.trigger(el, 'click'); // No click should happen.
+
+  vjs.trigger(el, 'event1');
+  vjs.trigger(el, 'event1');
+  vjs.off(el, 'event1', listener);
+  vjs.trigger(el, 'event1'); // No event1 should happen.
+
+  vjs.trigger(el, 'event2');
+  vjs.trigger(el, 'event2');
+  vjs.off(el, 'event2', listener);
+  vjs.trigger(el, 'event2'); // No event2 should happen.
+});
+
 test('should remove all listeners of a type', function(){
   var el = document.createElement('div');
   var clicks = 0;
@@ -36,6 +62,30 @@ test('should remove all listeners of a type', function(){
   ok(clicks === 2, 'no click listeners fired');
 });
 
+test('should remove all listeners of an array of types', function(){
+  var el = document.createElement('div');
+  var calls = 0;
+  var listener = function(){
+    calls++;
+  };
+  var listener2 = function(){
+    calls++;
+  };
+
+  vjs.on(el, ['click', 'event1'], listener);
+  vjs.on(el, ['click', 'event1'], listener2);
+  vjs.trigger(el, 'click'); // 2 calls
+  vjs.trigger(el, 'event1'); // 2 calls
+
+  ok(calls === 4, 'both click listeners fired');
+
+  vjs.off(el, ['click', 'event1']);
+  vjs.trigger(el, 'click'); // No click should happen.
+  vjs.trigger(el, 'event1'); // No event1 should happen.
+
+  ok(calls === 4, 'no event listeners fired');
+});
+
 test('should remove all listeners from an element', function(){
   expect(2);
 
@@ -73,6 +123,23 @@ test('should listen only once', function(){
   vjs.trigger(el, 'click'); // No click should happen.
 });
 
+test( 'should listen only once in multiple events from a single call', function(){
+  expect(3);
+
+  var el = document.createElement('div');
+  var listener = function(){
+    ok(true, 'Callback Triggered');
+  };
+
+  vjs.one(el, [ 'click', 'event1', 'event2' ], listener);
+  vjs.trigger(el, 'click'); // 1 click
+  vjs.trigger(el, 'click'); // No click should happen.
+  vjs.trigger(el, 'event1'); // event1 must be handled.
+  vjs.trigger(el, 'event1'); // No event1 should be handled.
+  vjs.trigger(el, 'event2'); // event2 must be handled. 
+  vjs.trigger(el, 'event2'); // No event2 should be handled.
+});
+
 test('should stop immediate propagtion', function(){
   expect(1);
 

test/unit/lib.js

@@ -324,3 +324,16 @@ test('should confirm logging functions work', function() {
     console.error = origError;
   }
 });
+
+test('should loop through each element of an array', function() {
+    expect(11);
+    var a = [1, 2, 3, 4, 5];
+    var sum = 0;
+    var i = 0;
+    vjs.arrayForEach(a, function(item, iterator, array) {
+        sum += item;
+        deepEqual(array, a);
+        equal(i++,iterator);
+    } );
+    ok(sum, 15);
+} );