javascript - 是否可以在 JavaScript 中绑定(bind)多个滚动事件？

Question

当我尝试调试此问题时，似乎只有最后一个事件才能到达 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

此声明:

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

是对象文字的声明，其行为基本上类似于哈希表，即具有唯一键的键/值对集。当您提供三个“滚动文档”键，并且只允许使用一个键时，其中一个(最后一个)会覆盖其他键。

您可以使用以下数据结构之一，并相应地更新您的代码:

/* 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}
];