[thelist] Javascript: Closures vs Event Delegation

Volkan Özçelik volkan.ozcelik at gmail.com
Wed Feb 11 03:23:53 CST 2009


> Event Delegation is the way to go. If you do any DOM access in your
> closures IE has a lot of memory leaks. It is also much easier for you to
> deal with the event handling as you can listen to any element.
>

I agree, "event delegation" is the way to go, both in terms of performance
and memory utilization.

However, whether using event delegation is a requirement or an overkill,
depens totally on the context of your project.
If you do not have too much client-side controls on your site (an ajax-heavy
web application I mean), but just a few links and buttons that should load
links dynamically it will not make much difference.

Using good-old event handling approach does have certain pluses:
- It will speed up you development process
- It will help you find bugs faster since each user control will have a
separate decoupled event handling code.
- If you have a team of developers it will lower the risk of code conflicts
when you merge code in your version control system.

Personally, if the application we are developing does not extensively use
JavaScript eventa, I tend choose event handling. If the contrary is true, I
prefer event delegation pattern.

However keep in mind that converting a project that uses event-handling (or
worse inline event attachement like <a href="#" onclick="foo();return
false;"></a>) to a project that uses event delegation will take time and
effort.

So better make a conscise choice based on your project requirements,
project's scope, whether the project can be extended in latter phases, and
make a wise decision.

If you are concerned about the leak issue, you may want to use a JavaScript
library like JQuery, or YUI that handle it for you (for the interested, it's
generally through breaking the circular references at windows onbeforeunload
event and hence preventing the leak)

Or by not using closure you can prevent leak easily, even your library of
choice does not handle memory leaks:

I mean instead of using this

//this is your favorite library's DOM loaded event.
function ondomready(){
    //the anonymous function creates a closure over someitemid DOM node. ->
will leak memory if not handled properly.
   EventHandler.addEventListener("someItemId", "click", function(evt){
        dostuff();
    )};
}

You can use this and forget about memory leaks:

function ondomready(){
     EventHandler.addEventListener("someItemId", "click", someItemId_clicked
};
}

//this function is in a separate context. it does not create closure -> no
memory leaks.
function someItemId_clicked(evt){
     dostuff();
)

...
Closures generate an additional scope for themselves to execute in, which
consumes memory; as well as the leak they generate in older browsers.[1]

Also, to make things clear, Chris has an excellent tutorail on event
delegation versus event handling [2].


[1]
The closure-based "memory leak" issue is fixed in IE8, and it does not occur
in any other modern browsers.
http://www.howtocreate.co.uk/ie8.html

[2]
http://icant.co.uk/sandbox/eventdelegation/


HTH,
-- 
Volkan Ozcelik
+> Front End Architect, MessengerFX : http://www.messengerfx.com/
+> linkibol.com - in seek for quality links : http://www.linkibol.com/
+> my blog (in Turkish) : http://www.fikribol.com/donkisot/
+> Sardalya JavaScript Library : http://www.sarmal.com/sardalya/



More information about the thelist mailing list