Tuesday, March 11th, 2008
Controller: Event Delegation Library
Category: JavaScript
, Library
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]- Laundry
- Dishes
- Walk Dog
[html]
JAVASCRIPT:-
-
// event handlers for "todo" elements
-
$MVC.Controller("todos",{
-
// the onclick event handler
-
click: function(){
-
alert("clicked todo");
-
}
-
});
-
- You can put CSS queries in the function names and the handler is assigned to any matching element.
JAVASCRIPT:
-
-
// attach to input elements inside ul elements with class "foo"
-
"ul.foo input focus": function(params){
-
params.element.style.class = 'clicked';
-
}
-
-
- AJAX callbacks are simplified.
JAVASCRIPT:
-
-
}, click: function(){
-
new Ajax.Request('url', {onComplete: this.continue_to('deleted')});
-
}, deleted: function(){
-
alert('item deleted');
-
-
You can check out a detailed demo, and the full API.
2.9 rating from 28 votes
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.