Ajax Girl

Brian Moschel has created a new event delegation library called Controller, that aims to help logically organize your event handlers.

• Like other event delegation libraries, it lets you define event handlers that never have to be reattached, even if the HTML is modified.
• Unlike other libraries, controllers group event handlers for a specific set of HTML elements. This links the DOM to your JavaScript in an easy to understand way.
  [html]
  1. Laundry
  2. Dishes
  3. Walk Dog

  [html]

  PLAIN TEXT
  JAVASCRIPT:

  1.  
  2. // event handlers for "todo" elements
  3. $MVC.Controller(”todos”,{
  4.   // the onclick event handler
  5.   click: function(){
  6.     alert(”clicked todo”);
  7.   }
  8. });
  9.  
• You can put CSS queries in the function names and the handler is assigned to any matching element.
  PLAIN TEXT
  JAVASCRIPT:

  1.  
  2. // attach to input elements inside ul elements with class "foo"
  3. “ul.foo input focus”: function(params){
  4.   params.element.style.class = ‘clicked’;
  5. }
  6.  
• AJAX callbacks are simplified.
  PLAIN TEXT
  JAVASCRIPT:

  1.  
  2. }, click: function(){
  3.    new Ajax.Request(’url’, {onComplete: this.continue_to(’deleted’)});
  4. }, deleted: function(){
  5.    alert(’item deleted’);
  6.  

You can check out a detailed demo, and the full API.

Source: Ajaxian
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/249523975/controller-event-delegation-library