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

Groups > comp.lang.javascript > #21734

Re: I don't want to have if for each index in the loop

Show key headers only | View raw

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.

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

Thread

I don't want to have if for each index in the loop "Tony Johansson" <johansson.andersson@telia.com> - 2013-10-24 01:47 +0200
  Re: I don't want to have if for each index in the loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2013-10-24 02:44 +0100
    Re: I don't want to have if for each index in the loop "Tony Johansson" <johansson.andersson@telia.com> - 2013-10-24 09:16 +0200
      Re: I don't want to have if for each index in the loop Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-10-24 12:17 +0200
        Re: I don't want to have if for each index in the loop dhtml <dhtmlkitchen@gmail.com> - 2013-10-25 14:52 -0700
          Re: I don't want to have if for each index in the loop Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-10-26 00:38 +0200

csiph-web