Question

What value do we get by using closures in JavaScript for implementing callbacks and and event handler attachment . I know jQuery uses this pattern extensively but want to understand why ?

Answer 1

Assigning a closure as a callback gives you access to the scope which it is defined within. It also helps keep your namespace clean. Other libraries allow you to bind object methods as event handlers, giving the event access to the object, which is a pretty elegant alternative solution. For instance, maybe something like this:

// an object definition
var Accordion = function () {
   this.clickCounter = 0;
};
Accordion.prototype.click = function () {
   this.clickCounter += 1;
   alert( this.clickCounter );
};

// create object
var myAccordion = new Accordion();

// function to bind DOM element events to javascript object methods
function methodBind ( element, eventType, myObject, myMethod ) {
   $( element ).bind( eventType, function(e) {
      e.preventDefault();
      myObject[myMethod ].call(myObject);
   } );
}

// bind buttons on an element to activate a correlating object method
$( '.Accordion' ).find( '.button' ).each( function() {
   methodBind( this, 'click', myAccordion, 'click' );
} );

Although my implementation also uses closures haha.