Path: csiph.com!usenet.pasdenom.info!dedibox.gegeweb.org!gegeweb.eu!nntpfeed.proxad.net!proxad.net!feeder2-2.proxad.net!newsfeed.arcor.de!newsspool2.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type: text/plain; charset="ISO-8859-1"
Message-ID: <4429325.cM6MFbt01H@PointedEars.de>
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Organization: PointedEars Software (PES)
Date: Sat, 26 Oct 2013 00:38:07 +0200
User-Agent: KNode/4.10.5
Content-Transfer-Encoding: 7Bit
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
Subject: Re: I don't want to have if for each index in the loop
Newsgroups: comp.lang.javascript
References: <l49n7g$u0a$1@dont-email.me> <0.2881687aedec8c956bad.20131024024418BST.87li1jbfyl.fsf@bsb.me.uk> <l4ahg3$7ba$1@dont-email.me> <3044571.oA5CmXAGKN@PointedEars.de> <6ca9a5c5-bfaa-48ca-947e-be5fc60fb3b3@googlegroups.com>
MIME-Version: 1.0
Lines: 97
NNTP-Posting-Date: 26 Oct 2013 00:38:10 CEST
NNTP-Posting-Host: 96fd362d.newsspool1.arcor-online.net
X-Trace: DXC=o:mFoZ>M7E[=>bdbdS?M0Yic==]BZ:af^4Fo<]lROoRQnkgeX?EC@@P0E8X5N4L0ERDZm8W4\YJN\YUVHKH;GI^WM4^<BZ0U<Z\>Y;SHD3Z=bR
X-Complaints-To: usenet-abuse@arcor.de
Xref: csiph.com comp.lang.javascript:21734

dhtml wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Tony Johansson wrote:
>> > Many thanks nice solution and it was exactly this that I was looking
>> > for.
>> > 
>> > [Top post]
>> 
>> What you are looking for is
>> 
>> - to read on attribute properties in order to get rid of setAttribute();
>> - to read on event bubbling in order to get rid of multiple event
>>   listeners;
> 
> Yes!
> 
> Valuable advice here.
> 
> The information on closures is useful to learn, and should be considered
> here for the OP. And in this particular case, OP, bubbling is more
> elegant, so look into that.
> 
> Here is a general example, though there must be better examples online.

Plenty.
 
> var imgThumbExp = /-thumb$/;
> var imgContainer = document.body; // Replace with closer ancestor

The comment should be a multi-line pre-comment to tell it apart of 
deactivating single-line comments.

The comment content is very important here.  The same as a short scope chain 
increases efficiency, so does a short event bubbling route.
 
> imgContainer.onclick = imgContainerClicked;
> 
> function imgContainerClicked(ev) {
>   var target = ev.target;

A wrapper is required to support non-W3C DOM implementations, in particular 
the MSHTML DOM before version 9, or version 9 in Browser Compatibility Mode.

<http://msdn.microsoft.com/en-us/library/ie/ff974946(v=vs.85).aspx>

>   if(target && imgThumbExp.test(target.id)) {
>     showBigImage(target.id.replace(imgThumbExp , "");

Passing ID strings *instead of* DOM object references to functions is not a 
good idea.

>   }
> }
> 
> <img id="pretzel-thumb" src="pretzel-thumb.jpg">
> <img id="pretzel" src="pretzel.jpg">

It is a lot easier (and more efficient) to use the suffix for the *target* 
element of the feature instead of the source element.  And I would filter 
for a class name, if necessary the element type before that:

  /* Replace with closer ancestor */
  var imgContainer = document.body;
  
  imgContainer.onclick = jsx.dom.createEventListener(imgContainerClicked);
  
  function imgContainerClicked (ev)
  {
    var target = ev.target;

    /* A wrapper is required to support non-HTML5 DOM implementations */
    if (target.classList.contains("thumb"))
    {
      showBigImage(document.getElementById(target.id + "-large"));
    }
  }
  
  <img id="pretzel" src="pretzel-thumb.jpg" class="thumb">
  <img id="pretzel-large" src="pretzel.jpg">

See also:

<http://www.w3.org/TR/2012/WD-dom-20121206/#dom-element-classlist>
<http://PointedEars.de/wsvn/JSX/trunk/dom.js>
<http://PointedEars.de/wsvn/JSX/trunk/dom/events.js>

Please trim your quotes, and avoid using the borken Google Groups if 
possible.

<http://PointedEars.de/faq/notes/posting/>

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.