Re: onload and onclick

From	Stefan Weiss <krewecherl@gmail.com>
Newsgroups	comp.lang.javascript
Subject	Re: onload and onclick
Date	2016-03-29 05:03 +0200
Organization	albasani.net
Message-ID	<ndcran$j8a$1@news.albasani.net> (permalink)
References	<ndb6qc$evs$1@gioia.aioe.org> <ndc59k$s7s$2@news.albasani.net> <events-20160328221902@ram.dialup.fu-berlin.de>

Show all headers | View raw

Stefan Ram wrote:
>   So, there is a »DOMready«, too! Now I have »load«, 
>   »DOMContentLoaded« /and/ »DOMready« to choose from!

[ I "hoisted" this part of my reply for clarity: ]

Sorry, I meant to write "DOMContentLoaded", not "DOMready".

>   When is it better or worse to use »DOMContentLoaded« instead
>   of »load«?
>
>   When is it better or worse to use »body.« instead of
>   »window.« above?

It depends on what exactly you want to wait for.

"DOMContentLoaded" is fired on the `document` object as soon as the
document is fully parsed and the DOM is ready for modification. It does
not wait for every external asset to finish loading. This event also
bubbles up to `window`.

The window's "load" event only fires when every asset on the page has
finished loading. This may take a long time; for example on a gallery
index page, all thumbnails will have to finish loading before this event
fires. Usually we want to make the UI interactive (by attaching
listeners) before that happens.

The document itself never fires a "load" event, but `document.body` can.
The drawback is that this listener cannot be set before the body exists
(i.e. when running a script in the header).

The relationship between `window.onload`, `<body onload=...>` and
`document.body.onload` is somewhat confusing: in Firefox and IE, there
is only a single callback for all three; setting any one of them
replaces the previous setting. In Chromium, there appear to be two
distinct callbacks: a shared one for `window.onload` and
`document.body.onload`, and a separate one for `<body onload=...>`,
which always runs.

In general, my recommendation would be:

- If you want to execute code as soon as possible, before all assets
  have finished loading, listen for "DOMContentLoaded" on `document`
  (or `window`).

- If you want to execute code when everything has finished loading, use
  `window.onload` OR `<body onload>` OR `document.body.onload`, but only
  one of them.

>   I am looking for a »default call« to start my scripts that
>   should make sure that most of what usually is needed for a
>   script has been loaded, and so far I had settled for
> 
> document.addEventListener( "DOMContentLoaded", ...

Looks fine to me.

>> Most people use libraries to simplify common tasks like event handling
>> and element selection. With one such library, your code might look like
>> this:
> 
>   I would not use jQuery for »simplification« of a specific
>   task in a specific browser, but rather because - as far as
>   I have heard about it - it contains code that already
>   contains several adaptions to specific browsers (and their
>   deficiencies and bugs), so, I'd use it because it can act
>   as a kind of compatibility layer to different browsers.

True, but the focus of OP's question was that his code seemed too
complicated. A comprehensive reply would have to mention libraries.

I chose jQuery as an example because it's the most commonly used, but I
hardly ever use it myself. It was not an endorsement.

- stefan

Thread

onload and onclick emf <emfril@gmail.com> - 2016-03-28 08:07 -0400
  Re: onload and onclick Stefan Weiss <krewecherl@gmail.com> - 2016-03-28 22:47 +0200
    Re: onload and onclick Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-03-28 23:23 +0200
      Re: onload and onclick Frank Kozuschnik <franko@nurfuerspam.de> - 2016-03-29 00:20 +0200
        Re: onload and onclick Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-03-29 00:43 +0200
      Re: onload and onclick Stefan Weiss <krewecherl@gmail.com> - 2016-03-29 00:57 +0200
        Re: onload and onclick Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-03-29 02:04 +0200
          Re: onload and onclick Stefan Weiss <krewecherl@gmail.com> - 2016-03-29 04:47 +0200
            Re: onload and onclick Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-03-31 20:06 +0200
              Re: onload and onclick Aleksandro <aleksandro@gmx.com> - 2016-03-31 15:37 -0300
              Re: onload and onclick Stefan Weiss <krewecherl@gmail.com> - 2016-04-02 01:43 +0200
    Re: onload and onclick Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-03-29 00:33 +0200
    Re: onload and onclick Stefan Weiss <krewecherl@gmail.com> - 2016-03-29 05:03 +0200
    Re: onload and onclick emf <emfril@gmail.com> - 2016-03-29 01:45 -0400
  Re: onload and onclick Aleksandro <aleksandro@gmx.com> - 2016-03-28 18:33 -0300

csiph-web