Tuesday, March 11th, 2008

Controller: Event Delegation Library

Category: JavaScript, Library

JavaScriptMVC

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.
    1. Laundry
    2. Dishes
    3. Walk Dog
    javascript

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

    1. // attach to input elements inside ul elements with class "foo"
    2. "ul.foo input focus": function(params){
    3.   params.element.style.class = 'clicked';
    4. }
  • AJAX callbacks are simplified.
    javascript

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

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

Posted by Dion Almaer at 8:55 am
1 Comment

++---
2.9 rating from 33 votes

1 Comment »

Comments feed TrackBack URI

A few of the other benefits:

It’s very complete as it works with IE’s submit event.

It calls events in the correct order. For a given event, it calls back to event handlers on elements in the same order the buble phase would normally callback.

There is a special controller for document/window/body events.

Comment by JustinMeyer — March 11, 2008

Leave a comment

You must be logged in to post a comment.