Bind Events

  Event.addBehavior({
    '#div1 a:click': function() {
      $('body').css({backgroundColor: 
      '#'+Math.floor(Math.random()*16777215).toString(16)});
    }
  });

Do stuff just because an element exists

  Event.addBehavior({
    '#twitter_trends': function() {
      //some code that loads
      //current trends from twitter
    }
  });

Use behaviors to encapsulate.. behavior

  var AwesomeBehavior = Behavior.create({
    initialize: function() {
      this.element //the bound element
    },

    onclick: function() {
      this.element.append($('<span>✔</span>'));
    }
  });
  Event.addBehavior({
    '#behaviors p': AwesomeBehavior
  })

I have a behavior

Behaviors automagically get bound to elements added at any time

  var AwesomeBehavior = Behavior.create({
    initialize: function() {
      this.element //the bound element
      this.element.css('color', '#' + randomColor());
    },

    onclick: function() {
      this.element.append($('<span>✔</span>'));
    }
  });
  Event.addBehavior({
    '#list li': AwesomeBehavior
  })

• list item 1
• list item 2
• list item 3

Note: this only works for behaviors with event methods. That's because it's using jQuery.live to catch any of the bound events on the element and it initializes the behavior when the event is triggered. (the color change on initialize here is meant to demonstrate when the behavior is getting intialized)