2

How does jQuery achieve declaring an event listener inside of a self invoking function without being in window.onload, whereas JavaScript returns null.

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

  window.onload = function() {
    // attaches event correctly
    document.querySelector('#backtotop').addEventListener(self.scrollTop, false);
  };
})();
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jeff Lupinski
  • 226
  • 2
  • 5
  • 2
    jQuery doesn't do it in a self invoking function. Are you confusing that with the `$(function() {...})` syntax? That's a shortcut for `$(document).ready(function() {...})` – cookie monster Mar 27 '14 at 21:23
  • possible duplicate of [How does jQuery's "document ready" function work?](http://stackoverflow.com/questions/5959194/how-does-jquerys-document-ready-function-work) It simply binds a handler to run when the body has loaded using whatever method is available in the current browser. – cookie monster Mar 27 '14 at 21:26

1 Answers1

1

This is called event delegation. The idea is to bind event to one of the parent nodes and benefit from event bubling. For example you cam bind event to the body tag:

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

You will need to filter necessary target inside of event handler.

In this case it's not necessary for #backtotop to be available in DOM by the time of event initialization.

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • 1
    He's really not asking about delegation. The question shows that the `window.onload` handler successfully binds. There's no delegation done there. But it's worth knowing about in any case. – cookie monster Mar 27 '14 at 21:31
  • I think that OP is actually asking about how is it possible to bind event when the node is not available yet (`// returns null`) without using `window.onload` (when the DOM is already rendered and `// attaches event correctly`). – dfsq Mar 27 '14 at 21:36
  • Right, but the node in the question is available when the DOM is ready. It's not being added dynamically later. jQuery doesn't use `window.onload` and he appeared to conflate the IIFE syntax with the shorthand `.ready()` syntax. Anyway, like I said, delegation is worth knowing, though to be anything like jQuery's you'd need to test all ancestor elements from `event.target` until `document` to see if a match is found. – cookie monster Mar 27 '14 at 21:38
  • Well in question the DOM is *not* ready. You can clearly see that outside `window.onload` `document.querySelector('#backtotop')` is null, and inside "attaches event correctly". – dfsq Mar 27 '14 at 21:41
  • And that's my point. When the DOM is not ready, it fails, but when it is ready, it succeeds. jQuery doesn't need or use event delegation to accomplish the same. It binds a handler that runs when the `document` is ready, which is after the script loaded, but before the `window.onload` happens. – cookie monster Mar 27 '14 at 21:43
  • You are probably right, OP confused IIEF with `$(function() {})`. – dfsq Mar 27 '14 at 21:45