event:Selectors for Prototype

Justin Palmer has released event:Selectors, a method to cleanly use CSS pseudo selectors to assign DOM events to elements on the page.

It’s inspired by behaviour.js, but builds on all the latest Prototype goodness and adds some nice new features.

Here’s a snippet of what you can do (notice how nicely it works together with script.aculo.us!):

var Rules = {
  '#icons a:mouseover': function(element) {
     var app = element.id;
     new Effect.BlindDown(app + '-content',
       {queue: 'end', duration: 0.2});
   },

   '#icons a:mouseout': function(element) {
     var app = element.id;
     new Effect.BlindUp(app + '-content',
       {queue: 'end', duration: 0.2});
  }
}

Examples for multiple assignments and event passing:

'#feature, #otherstuff': function(element) {
  Sortable.create(element);
}

'.links a:click': function(element, event) {
  $('item').toggle();
  Event.stop(event);
}

Update: Here’s the official announcement from Justin – and shame on me for leaking

Tweet This Post Digg This Post Share on Facebook