Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30136

Re: onload and onclick

Show key headers only | View raw

Stefan Weiss wrote:

> emf wrote:
>> window.onload = function () {
>>     "use strict";
>>     document.getElementById("start").onclick = function () {
>>         requestFullScreen();
>>         init();
>>     };
>> };
>> 
>> I arrived at this solution after deciding to remove any JS code from the
>> HTML code. It works fine, however it looks a little too complicated for
>> my personal taste. Is there a simpler way to write it?
> 
> This is pretty typical code for what you're doing. There are a few
> variations that could make it a little more concise, but nothing
> dramatic. For example:
> 
> - If you include this script after the element with the ID "start", you
>   don't have to wait for the "load" event before you assign a click
>   handler to the element.

Not guaranteed:

<https://www.w3.org/TR/2014/REC-html5-20141028/introduction.html#common-pitfalls-to-avoid-when-using-the-scripting-apis>

> - Strict mode makes no difference in this particular function, so the
>   "use strict" statement could be left out.

Questionable advice.  If the function is later augmented with source code to 
which strict mode would be relevant, those checks would not be performed.  
And the OP is evidently not ECMAScript-savvy enough to know when strict mode 
would apply so chances are that they would not add the declaration later.

The standing recommendation, particularly to beginners, is to declare strict 
mode *locally* (which the OP has done, although it could be declared for a 
“module” of the module pattern as well), unless legacy code requires 
otherwise *and* cannot be easily rewritten to accomodate strict mode.
*A lot* of common beginner’s mistakes are detected this way.

> - Explicitly referring to the `window` object is optional;

Cite evidence.

> you could write `onload = function ()...` with the same effect.

A Really Bad Idea.  What if there happens to be a property of an object or a 
variable in the scope chain that is not the targeted object?  What if it is 
strict mode code?  This change makes the code less compatible and harder to 
reuse *at no advantage*.
 
> Personally, I wouldn't use any of these. I would even go a step in the
> opposite direction and use the more verbose `addEventListener()` method
> instead of the DOM-0 style "onload" and "onclick" properties:
> 
>   window.addEventListener("load", function () {
>       // etc
>   });
> 
> This allows for more than one listener per target and event type, which
> is particularly useful for the "load" event.

Yes, the event listener should be added.  But verbatim this does not work in 
IE < 9, and IE 9 in Compatibility Mode.  So if that is a problem a wrapper 
is required.  (Microsoft has terminated support for versions before IE *11* 
in January. [1]  We have removed IE 8 support last year [IIRC], and are 
going to stop actively supporting IE 9 sometime this year.)

[1] <https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support>
 
> Most people use libraries to simplify common tasks like event handling
> and element selection.

ACK.

> With one such library, your code might look like this:
> 
>   $(function () {
>       $("#start").click(function () {
>           requestFullScreen();
>           init();
>       });
>   });

Looks like jQuery-based code where .on("click", …) is recommended instead, 
for extensibility and consistency.
 
> That's shorter (and also uses the "DOMready" event). Loading a huge
> library for just a few lines of code would be counterproductive, but
> typically the library gets used for the rest of the code, as well.

Still, one should carefully assess what features of the library are actually 
used, and use a tailored version, and the library wrappers only when 
necessary.  Should the library wrappers not be necessary at all, then the 
reasonable decision is not to use the library.

<http://youmightnotneedjquery.com/>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

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