prototype event handling
reggiestyles
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
Randy Webb
> Hi,
>
> I've got a question about prototype and event handling.
Then why not ask a prototype group?
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
reggiestyles
does onClick event handling slow down page responsiveness? Am I better
to have one onClick event for the entire page (and then evalute what
was clicked), or have multiple (10x) onlick events registered. Since
events aren't prototype specific, I thought that someone here might be
able to help.
VK
reggiestyles wrote:
> 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.
What is the best way of programming for scriptaculous is an obscure
matter. For a correct answer one needs to know the background mechanics
of all these top level envelopes. From the common programming point of
view you can start from this consideration:
No matter how many elements do you have, only one of them is active at
the given moment of time. It automatically means that by marking active
one element, you have to "blur off" one element either - namely the
element that was active before that. As the activated element will be
reported as [this] in the event handler, the task is simplified to just
one memory slot to remember the element we need to blur. So I cannot
tell how scriptaculous would do it, but in the conventional JavaScript
I would go with just one function and one variable:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
.demo {
float: left;
width: 100px;
height: 100px;
margin: 5px 5px;
padding: 5px 5px;
border: 2px solid #FFFF00;
background-color: #0000FF;
opacity: 0.5;
}
</style>
<script type="text/javascript">
var prev = null;
function setActive() {
this.style.opacity = 1;
if (prev != null) {
prev.style.opacity = 0.5;
}
prev = this;
}
function init() {
var p = document.getElementsByTagName('p');
var len = p.length;
for (var i=0; i<len; i++) {
if (p[i].className == 'demo') {
p[i].onclick = setActive;
}
}
}
window.onload = init;
</script>
</head>
<body>
<h1>Demo</h1>
<p class="demo"> </p>
<p class="demo"> </p>
<p class="demo"> </p>
<p class="demo"> </p>
</body>
</html>
Peter Michaux
>
> does onClick event handling slow down page responsiveness? Am I better
> to have one onClick event for the entire page (and then evalute what
> was clicked), or have multiple (10x) onlick events registered. Since
> events aren't prototype specific, I thought that someone here might be
> able to help.
You may want to look around in google for "event delegation". I don't
know when individual listeners becomes detrimental and event delegation
becomes a better approach. It is likely situation dependent.
<URL:
http://developer.yahoo.com/yui/examples/event/event-delegation.html>
Peter