[JS/CSS] event:Selectors - the simplest way to hook Javascript events to a CSS class

event:Selectors is a really nice wrapper for the Prototype.js library. It allows you to hook Javascript events to CSS classes with 2 or 3 lines of Javascript code:

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

Prototype recently added Attribute Selectors , which allows this kind of fun:

input[type="submit"] {  color:  #ccc; }
 a[href!="#"] { background:  #c00; }
 a[class~=external][href="#"] {  font-style: italic; }

1 Comment

  • I think,you've to look at jquery.com=prototype+event selectors and much more(xpath particularly).By the way,all those implementations can't compare with "real" attached behaviors of IE(begining from 5.5;-)

    Difference is simple but has big impact-real behavior's implementation is dynamic,but all those libs static=on request binding.So DOM manipulations not visible to this event selectors.

Comments have been disabled for this content.