Path: csiph.com!news.mixmin.net!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail From: Thomas 'PointedEars' Lahn Newsgroups: comp.lang.javascript Subject: Re: onload and onclick Date: Mon, 28 Mar 2016 23:23:14 +0200 Organization: PointedEars Software (PES) Lines: 104 Message-ID: <3360887.gmJMtLSuvG@PointedEars.de> References: Reply-To: Thomas 'PointedEars' Lahn Mime-Version: 1.0 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: 8Bit X-Trace: solani.org 1459200195 6538 eJwNy8kBwDAIA7CVuGxYp5Cw/wip/oJTORkEA4uVQFPsMmfA9OWtUbPD8Y+2KiH4w+kJ6aoHC/sQmA== (28 Mar 2016 21:23:15 GMT) X-Complaints-To: abuse@news.solani.org NNTP-Posting-Date: Mon, 28 Mar 2016 21:23:15 +0000 (UTC) User-Agent: KNode/4.14.2 X-User-ID: eJwFwYEBwDAEBMCVKP8YJxH2H6F3MCo7nKBjsdG+Z/LL2bS+UeS3l9ITdqFq5vpKeNOAaVuVeWdk8Lrg9QNbAxWf Cancel-Lock: sha1:Wf94aqnQKHC2uKj310EcVR9RMxw= X-NNTP-Posting-Host: eJwNyUcBwDAMBDBKPs8aTuLBH0Kqr0wcXqFurra2zY4kpo+l6B/ciMlcPtG8UzJ+lRPYBvLkAwbxEJ0= Xref: csiph.com comp.lang.javascript:30136 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: > - 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] > 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. -- PointedEars FAQ: | SVN: Twitter: @PointedEars2 | ES Matrix: Please do not cc me. / Bitte keine Kopien per E-Mail.