javascript - 动态添加函数到window.onscroll？

Question

我知道我只能调用一次window.onscroll = function(){}，因为多次调用它可能会导致它们相互覆盖。这就是为什么我问:是否可以将函数调用“推送”到 window.onscroll？

//example
function example(num) {
  var number = num;
  window.onscroll = function() {
    number *= number
  }
}
example(2);
example(4);
//this way, the number only changes in the second function call
//somehow it's possible to get the same result? ("adding" functions to window.onscroll
function example(num) {
  var number = num;
  window.onscroll += function() {
    number *= number
  }
}
example(2);
example(4);

如何向 window.onscroll“添加”函数调用？

Answer 1

这可以通过使用addEventListener API来实现。

例如:

window.addEventListener('scroll', function() {
  console.log('one');
});

window.addEventListener('scroll', function() {
  console.log('two');
});

例如，在this CodePen中，我将两个滚动监听器绑定(bind)到 window 对象。如果您打开浏览器控制台并滚动底部的预览 Pane ，您应该会看到两条消息在控制台中重复出现。