Is it possible to bind several scroll events in JavaScript?

Question

When I try to debug this it seems that only the last event even gets to bindEvents():

var ArrayProto = Array.prototype;
var nativeForEach = ArrayProto.forEach;
var breaker = {};

var _has = function (obj, key) {
      return hasOwnProperty.call(obj, key);
    };

function _each(obj, iterator, context) {
      if (obj == null) return;
      if (nativeForEach && obj.forEach === nativeForEach) {
        obj.forEach(iterator, context);
      } else if (obj.length === +obj.length) {
        for (var i = 0, l = obj.length; i < l; i++) {
          if (i in obj && iterator.call(context, obj[i], i, obj) === breaker) return;
        }
      } else {
        for (var key in obj) {
          if (_has(obj, key)) {
            if (iterator.call(context, obj[key], key, obj) === breaker) return;
          }
        }
      }
    };

function bindEvents(rootElement, events) {
    debugger
    _each(events, function (functionName, eventField) {
        var eventFieldArray = eventField.split(' ');
        if (eventFieldArray.length >= 2) {
            var eventType = eventFieldArray[0];
            var rawElementName = eventFieldArray.slice(1).join(' ');
            var elements = (rawElementName == 'document') ? rawElementName : rootElement.querySelectorAll(rawElementName);
            if (elements == 'document') {
                document.addEventListener(eventType, functionName);
            } else {
                _each(elements, function (element) {
                    if (element) {
                        element.addEventListener(eventType, functionName);
                    }
                });
            }
        }
    });
};

var self = {
    didScrollForSticky: function (e) {
        console.log("STRCKY");
    },
    didScrollForTabs: function (e) {
        console.log("TABS");
    },
    didScrollForInfinite: function (e) {
        console.log("INFINITE");
    }
};

var eventsDesktop = {
    "scroll document": self.didScrollForSticky,
    "scroll document": self.didScrollForTabs,
    "scroll document": self.didScrollForInfinite
};

bindEvents(document, eventsDesktop);

Answer 1

This statement:

var eventsDesktop = {
    "scroll document": self.didScrollForSticky,
    "scroll document": self.didScrollForTabs,
    "scroll document": self.didScrollForInfinite
};

is a declaration of an object literal, which basically behaves like an hash table, i.e. set of key/value pairs, with unique keys. As you probide three "scroll document" keys, and only one is allowed, one of them (last one) overwrites the others.

You could use one of following data structures, and update your code accordingly:

/* Change keys */
var eventsDesktop = {
    "scroll document #1": self.didScrollForSticky,
    "scroll document #2": self.didScrollForTabs,
    "scroll document #3": self.didScrollForInfinite
};

/* Use hash-of-lists */
var eventsDesktop = {
    "scroll document": [
        self.didScrollForSticky,
        self.didScrollForTabs,
        self.didScrollForInfinite
    ]
};

/* List-of-lists */
var eventsDesktop = [
    ["scroll document", self.didScrollForSticky],
    ["scroll document", self.didScrollForTabs],
    ["scroll document", self.didScrollForInfinite]
];    

/* List-of-hashes */
var eventsDesktop = [
    { name: "scroll document", callback: self.didScrollForSticky},
    { name: "scroll document", callback: self.didScrollForTabs},
    { name: "scroll document", callback: self.didScrollForInfinite}
];