prototype event handling

reggiestyles · Jan 4, 2007

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

Randy Webb · Jan 4, 2007

reggiestyles said the following on 1/4/2007 3:03 PM:

Hi,

I've got a question about prototype and event handling.

Then why not ask a prototype group?

reggiestyles · Jan 4, 2007

it's stil a generic javascript question at it's heart:

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 · Jan 4, 2007

reggiestyles said:
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.className == 'demo') {
p.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 · Jan 5, 2007

reggiestyles said:
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

Clickable Div Block	1	Oct 13, 2023
Slideshow not working properly	2	Jan 7, 2023
Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021
Gallery - mosiac/grid layout with filtering and information page popup	1	Apr 13, 2020
Prototype 1.6--Somebody Stop These People	6	Dec 24, 2009
simple question: prototype how to remove Event observer	1	Apr 17, 2008
Array to select/deselect based on boolean conditions	0	Apr 1, 2019
Only one table shows up with the information	2	Mar 29, 2023

prototype event handling

reggiestyles

Randy Webb

reggiestyles

VK

Peter Michaux

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads