On Nov 16, 11:27 pm, phegaro <pheg...@gmail.com> wrote:
> Hi all,
> I have an app that is going to put out a list of items onto a page
> and each one has a number of click targets. Now i could setup the
> event handler in one of two ways.
>
> 1. add it into the template that is rendered with the following code
>
> <div onclick="doIt()" id="item_1" class="item">Item Name 1</div>
>
> or i could do the following
>
> 2. Add it using a selector and a script
>
> $$(".item").each(function(element){element.observe('click', doIt);});
>
> Are there any issues with option 1 or 2 and which is more performant
> and cross browser compatible. I think 1 is more performant but not
> sure it works in all browsers.
Generally, the recommendation is not to use the old 'onClick=' method
of event handling: I don't know how it compares for performance, but
it's certainly less flexible.
You can simplify your 2) slightly:
$$(".item").invoke('observe', 'click', doIt);
A third alternative is to use delegation:
$(document).observe('click', doIt);
and then make doIt determine what was clicked:
function doIt(e) {
var item = e.findElement('.item');
...
}
This is particularly good if you are going to be adding items
dynamically when the page has already been loaded.
Colin Fine
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
