JavaScript/jQuery eventListener - 在 window.onload 之外声明

Question

jQuery 如何在不在 window.onload 中的情况下在自调用函数内声明事件监听器，而 JavaScript 返回 null。

(function() {
  // returns null
  document.querySelector('#backtotop').addEventListener(self.scrollTop, false);

  window.onload = function() {
    // attaches event correctly
    document.querySelector('#backtotop').addEventListener(self.scrollTop, false);
  };
})();

Answer 1

这称为事件委托(delegate)。这个想法是将事件绑定(bind)到父节点之一并从事件冒泡中受益。例如，您可以将事件绑定(bind)到 body 标签:

document.body.addEventListener('click', function(e) {
    if (e.target.id == 'backtotop') {
        self.scrollTop();
    }
}, false);

您需要在事件处理程序中过滤必要的目标。

在这种情况下，#backtotop 不必在事件初始化时在 DOM 中可用。