Hi,
I've got a question about prototype and event handling.
I've got several div's (dynamic number) on a page that I want to set as
active or inactive (basically, I'm using scriptaculous' Effects to set
Opacity to 1 for the active div and 0.5 for the inactive ones).
Using prototype's event handling, I can see two ways to get this done:
1) Attach a seperate "click" event to each div (that sets the required
opacity)
Event.observe('div1', 'click', "function to set this div as active and
set others to inactive" );
2) Attach ONE "click" event to the document that tracks every click and
if the click is on one of the divs it sets the appropriate opacity to
each div.
Event.observe(document, 'click',
this.highlight.bindAsEventListener(this));
function highlight(event) {
clickedDiv = Event.element(event);
// set clickedDiv to active and all others to inactive
}
I'm just trying to figure out which is better. With #1, if I had 10
divs, I would have 10 events. The divs are also "closable" so I'd have
to worry about removing the corresponding event if the div is closed.
However, with #2, every click on the page would result in the event
call which includes checking click location and determaning if it was
within one of the divs in question.
Any ideas? Does having multiple event handlers effect page
responsivness/memory?
Thanks for any help / ideas