473,320 Members | 2,158 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

prototype event handling

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

Jan 4 '07 #1
4 2054
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?

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 4 '07 #2
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.

Randy Webb wrote:
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?

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 4 '07 #3
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">&nbsp;</p>
<p class="demo">&nbsp;</p>
<p class="demo">&nbsp;</p>
<p class="demo">&nbsp;</p>

</body>
</html>

Jan 4 '07 #4
reggiestyles wrote:
>
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

Jan 5 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Eric | last post by:
How can I dynamically assign an event to an element? I have tried : (myelement is a text input) document.getElementById('myelement').onKeyUp = "myfnc(param1,param2,param3)"; ...
18
by: Christopher W. Douglas | last post by:
I am writing a VB.NET application in Visual Studio 2003. I have written a method that handles several events, such as closing a form and changing the visible status of a form. I have some code...
8
by: Elf M. Sternberg | last post by:
One of the complaints about prototype.js (google for it if you're not familiar with it) is that it's poorly documented. I have this inkling that the key to understanding prototype.js is in the...
10
by: Robert | last post by:
Hi, I would like to determine if a property is available in an Event prototype. I tried doing this using: if (Event.prototype.srcElement) but I got an "Illegal operation on WrappedNative...
5
by: tomlong | last post by:
What is the reason why Javascript, unlike other languages, uses prototype instead of classical inheritance? I know you can do classical inheritance with a bit of work, but it seems like the kind...
12
by: petermichaux | last post by:
Hi, I've been reading the recent posts and older archives of comp.lang.javascript and am surprised by the sentiments expressed about the prototype.js library for a few reasons: 1) The library...
31
by: Tony | last post by:
I just noticed that prototype.js is one of the files in the Ajax.NET distribution - I'm pretty concerned about this. Does anyone know if this is the same "prototype.js" that is not well-liked...
17
by: Steve-O | last post by:
The following code works great in FireFox, Opera, Netscape, Safari, and Gecko, but NOT IE. Why? I tried using 'native' js with setInterval and setTimeout, but I get the same result. My IE...
11
by: webgour | last post by:
Hello, I am wondering why the following works, on IE6, but with an error : "Not implemented". function TEST(){} TEST.prototype.Initialize = function() { var mImage = new Image(); var mDate...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.