Controller Overview

Controller is an event delegation library that helps logically organize your event handlers.

Controller makes your applications:

Easier to read
Faster to write
Easier for others to understand

Learn, API, Demo

Clearly understand your code's purpose

<ol id="todos">
  <li class="todo">Laundry</li>
  <li class="todo">Dishes</li>
  <li class="todo">Walk Dog</li>
</ol>

Todos HTML

// event handlers for "todo" li's
Controller("todos",{
  // the onclick event handler
  click: function(){
    alert("clicked todo");
  }
});

Todos Controller

With controller, one look at your code and you'll know its purpose without ambiguity.

Naming Conventions

By naming a controller, you describe which part of the page its event handlers operate on. For example, the todos controller operates on elements with id "todos" and class "todo".

Function names describe the events they respond to. For example, to create an onclick handler, name it "click".

Deterministic Code

Controllers group event handlers that operate on a specific part of the page. When you click an element with class "todo", you'll know exactly where to find its event handler.

Don't repeat yourself

$('todos').innerHTML += "<li class='todo'>"
  + "Laundry</li>";
// this li automatically inherits event
// handlers from Todos Controller

Never reattach your event handlers, even if the HTML is modified! This makes writing AJAX applications that modify the page much easier.

Conventional event attachment requires you to reattach event handlers to new page elements. Instead, Controller creates permanent event attachment rules so you never have to write event attachment code. This is achieved using event delegation.

Highlights

// attach to ul elements with class "foo"
"ul.foo click": function(params){
  params.element.style.class = 'clicked';
}

Match elements with CSS selectors

Name your event handlers with CSS selectors to assign the handler to matching elements.

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

Simple AJAX callbacks

Controller provides a simple, clean syntax for AJAX callbacks.

// grab the contents of the form
var form_data = params.form_params();

Form helpers

Simplify client side form validation with a helper that gathers form data.

change, click, contextmenu, dblclick, 
mousedown, mousemove, mouseout, mouseover, 
mouseup, reset, resize, select, submit, 
dblclick, focus, blur, load, unload, 
keypress

Support for all common events

Controller attaches all the most commonly used events.

Cross browser support

Controller works across all four major browsers.

Controller('main',{
  // the window onload event handler
  load: function(){
    alert('page loaded');
  }
});

Special controller for special events

A special controller named Main handles events for the window, document, or body, such as load, unload, and resize.

Events fire in correct order

Events fire in the correct DOM order from the deepest elements up to the body element, the same order you�d expect if you were listening in the bubble phase.

Nested elements behave

If you put a click handler on a div element with a paragraph element inside of it, then click the paragraph element, the click handler is called, with the div element passed as the target element. This test fails in other event delegation libraries.

Related Learning

Learn
An explanation of important concepts and examples.

Demo
A full walkthrough of an interactive todo list built with Controller.

API
Low level documentation for Controller's methods.