The Problem (Motivation)

Javascript clutters the HTML code
Implementation logic is scattered

The dialog

Add same functionality to each text input
... depending on the dialog.

The Idea

Use CSS selectors to bind functionality to nodes. I.e.,

use meaningful CSS classes in html and
register sets of rules that say what event is handled how.

The Implementations

Selector function by Simon Willison
First behaviours implementation by Ben Nolan
Another implementation by Dave Herman
My implementation with own selection function

Behaviour Registration

  registerRules({
    'p.active .shed' : {
      onmouseover : function() {
        document.getElementById('enlighten').style.color='yellow';
      },
      onmouseout : function() {
        document.getElementById('enlighten').style.color='';
      }}});

The Dialog (2)

  registerRules({
    'div.example2 input' : {
      onkeypress : function(e) {
        if (e.which == 13) {
          alert("You pressed Enter");
          return false;
        }}}});

Outside the Registry

Problem: Decorate external links.

Solution: Use callForElementsBySelector() to manipulate all external links.

Example 3

The Dialog (3)

   callForElementsBySelector('div.dialog3 div.dialog', document,
     function(node) {
       var submitNode;
       callForElementsBySelector('input[type=submit]', node,
               function(curSubmitNode) { submitNode = curSubmitNode });
       callForElementsBySelector('input[type]', node,
         function(inputNode) {
           registerEventHandler(inputNode, 'onkeypress',
             function(e) { if (e.which == 13) alert(submitNode.value) });
         });
      })

Behave Features

CSS 2 and some CSS 3 features
registerRules() for standard behaviour registry
registerEventHandler() to register event handlers
callForElementsBySelector() to iterate over elements
can be used relative to a node
lightweight (~250 LOC)
fast
flexible

First Name
Last Name

First Name
Last Name

First Name
Last Name