John posted an interesting 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. Comparing Behaviour + Prototype, Prototype 1.5.0, event:Selectors and jQuery; the result is amazing :

Behaviour + Prototype

Behaviour.register({<br /> '#item li': function(element) {<br /> Event.observe(element, 'click', function(event) {<br /> Event.element(element).setStyle({color: '#c00'});<br /> });<br /> },</p> <p> '#otheritem li': function(element) {<br /> Event.observe(element, 'click', function(event) {<br /> Event.element(element).setStyle({color: '#c00'});<br /> });<br /> }<br /> });

Prototype 1.5.0

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

event:Selectors

EventSelectors.start({<br /> '#item li:click, #otheritem li:click': function(){<br /> this.setStyle({'color': '#c00'});<br /> }<br /> });

jQuery

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