[Javascript] Help with closures

[Bill Moseley]

On Fri, Jan 12, 2007 at 10:33:48AM -0000, Alex Turner wrote:
> Dood,
>  
> I would place call onclick like this:
>  
> <span class="click" onclick='toggleMe(this)'>Hide this content</span>

I prefer to separate the behavior from the markup.  Which probably
means my "hide" and "show" links should then be inserted into the DOM
by the script and not in the source html.


Sorry, I wasn't very clear in my question.  I was not about other
ways to solve the same problem, but about the behavior I'm seeing in
this example.

What I'm wondering about is, when I have two separate hide/show
blocks, why are the events from the first block  passing the elements
of the second block.

In <http://hank.org/hide_content.js> I loop over each block doing this:

        // Find one or more hide/show outer divs.
        var targets = document.getElementsByClassName( 'hidable' );

        for ( var i = 0; i < targets.length; i++ ) {
            var out_div = targets[i];

            // Grab the two inner <div> elements
            var content_div = this.get_container( 'content', out_div );
            var hidden_div = this.get_container( 'hidden', out_div );

            // And get the elements where to assign the events
            var hide_click = this.get_click( content_div );
            var show_click = this.get_click( hidden_div );


            // Create closure to hold the current <div>s for this event
            var show_event = function(e) {
                HideDiv.toggle(e, content_div, hidden_div );
                return false;
            }

            Event.observe( show_click, 'click', show_event, false );
            Event.observe( hide_click, 'click', show_event, false );
        }

That "show_event" function is a closure, right?   I'm creating a
function with the values of content_div and hidden div *at that time*.
Then the next time through the loop new content_div and hidden_div
variables are created (pointing to the new <div> elements).

But, although the correct <span> elements are being observed for
events, when the event fires and run "show_event", the HideDiv.toggle
function is being called always with the last values for "content_div"
and "hidden_div".

Probably easier to look at the code than to read my explanation.

My follow-up question about the above is if the above closure
will leak memory.



What I'm currently doing in <http://hank.org/hide2.html> is when the
event fires is figure out the content_div and hidden_div relative to
where the event element is in the DOM:

        var el = Event.element( event );

        var out_div = el.parentNode.parentNode;
        var content_div = this.get_container( 'content', out_div );
        var hidden_div = this.get_container( 'hidden', out_div );


But, again, I trying to understand what's happening with the first
example <http://hank.org/hide.html>.


Thanks,





-- 
Bill Moseley
moseley at hank.org