> This is a common misunderstanding of `bindAsEventListener`
Indeed, it's pretty rare to need to use bindAsEventListener.
> Finally, invoking `down` without
> arguments (i.e. when you only need to step one level down) is usually
> faster than using an expression:
It's not "down" anyway, is it? The div is a sibling of the h3 in the
OP's markup...
But I'm sure the OP's getting the idea. :-)
--
T.J. Crowder
tj / crowder software / com
On Oct 3, 1:39 pm, kangax <[EMAIL PROTECTED]> wrote:
> On Oct 3, 5:38 am, bluezehn <[EMAIL PROTECTED]> wrote:
>
>
>
> > So get that javascript out of the html and use observers.
>
> > So the code you have so far is much better in prototype as this:
>
> > <h3>Event</h3>
> > <div id="divvy2">
> > Test test test test test test test test ets test test test
> > test test
> > </div>
>
> > <!-- IN JAVASCRIPT -->
> > document.observe('dom:loaded', function()
> > {
> > $$('h3').each(function(h3) {
> > h3.observe('click', function() {
> > this.down('div').toggle();
> > }.bindAsEventListener(h3));
>
> This is a common misunderstanding of `bindAsEventListener` : ) Plain
> `bind` is actually sufficient unless you need to curry (prefill with
> arguments) an event handler. Also, `h3` (which `bindAsEventListener`
> uses) seems to be `undefined` here. Finally, invoking `down` without
> arguments (i.e. when you only need to step one level down) is usually
> faster than using an expression:
>
> $$('h3').invoke('observe', 'click', function() {
> this.down().toggle();
>
>
>
> });
> > });
>
> > });
>
> > So I've tried to use a really compact bit of code there not
> > necessarily to do exactly what you want, but to demonstrate loads of
> > cool prototype-ish features.
>
> > First, 'dom:loaded' is a custom event fired by prototype when the dom
> > has loaded BUT not necessarily all the images, flash files or whatever
> > else you may have on the page. Clearly this is better than onLoad for
> > the body or window. You can see that this event is observed by calling
> > the observe method on an object and specifying a function to run when
> > the event fires. Here the function is defined inline.
>
> > Moving down the code, $$ returns an array of everything that matches
> > that css definition. So in this case, all 'h3' tags in the dom. The
> > each method can be applied to all enumerables in prototype and is kind
> > of like a foreach language structure. So it's saying apply this
> > function to each h3 element.
>
> > You'll probably from jquery be familiar with the .down method, it's
> > kind of self explanatory, but then you'll notice as well the
> > bindAsEventListener function at the end there. What that effectively
> > does is make sure that the variable "this" inside the preceding
> > function refers to the parameter given in bindAsEventListener.
>
> > Any more qs let us know.
>
> --
> kangax
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
