Event Selector Showdown

Simple Challenge: Find all the LI elements underneath two different elements (using their #ID as reference) and bind a click handler which changes the color of the LI’s text. Here is how you would do that in all of the popular event/selector libraries.

Behaviour + Prototype

Behaviour.register({
  '#item li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  },

  '#otheritem li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  }
});

Prototype 1.5.0

$$('#item li, #otheritem li').each(function(li){
  Event.observe(li, 'click', function(event) {
    Event.element(li).setStyle({color: '#c00'});
  });
});

event:Selectors

EventSelectors.start({
  '#item li:click, #otheritem li:click': function(e){
    e.setStyle('color': '#c00');
  }
});

jQuery

$("#item li, #otheritem li").click(function(){
  this.css('color', '#c00');
});

I like to think that the code speaks for itself, as to which one is the easiest to use and understand. I find it interesting how Prototype is migrating closer to what jQuery has now – while jQuery itself is blasting away with some very cool new stuff. Definitely keep your eyes peeled for new releases, as they’ll be coming soon.

Posted: April 29th, 2006


Subscribe for email updates

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.