Skip to content


Oooo event:Selectors for Prototype

event_selectorsMy article on the Separation of Layout and Logic touched on a key point of heavy Javascript use in an Ajax rich environment...the need for separation of Javascript code - namely events - from the HTML. Behaviour was my suggested CSS/Javascript event selector framework.

Behaviour is a stand-alone event framework. You can use it regardless of whether or not you are using Prototype (or some other Ajax/Javascript library) - which is pretty cool. But...if you are using Prototype there is a lot of code duplication between the two libraries. Luckily, Mir.aculo.us has brought event:Selectors to my attention which is causing me to sing a different tune! Justin Palmer, event:Selector's creator is crediting Behaviour for the idea, but he's has what Behaviour has done a few steps further.

  • event:Selectors is dependant on Prototype which reduces code duplication.
  • It has reduced the layer of complexity of event selecting by one layer of abstraction.
  • The framework allows concatenation of CSS elements for event assignment.
  • Lastly, its added a loaded event that is triggered when an element loads.

Here's an example of Behaviour event handlining:

JavaScript:
  1. var rules = {
  2.     '#item li': function(element) {
  3.       Event.observe(element, 'click', function(event) {
  4.         var element = Event.element(element);
  5.         element.setStyle('color': '#c00');
  6.       });
  7.     },
  8.    
  9.     '#otheritem li': function(element) {
  10.       Event.observe(element, 'click', function(event) {
  11.         var element = Event.element(element);
  12.         element.setStyle('color': '#c00');
  13.       });
  14.     }
  15.   };
  16.   Behaviour.register(rules);

Here's the equivalent in event:Selectors:

JavaScript:
  1. var Rules = {
  2.     '#item li:click, #otheritem li:click': function(element) {
  3.       element.setStyle('color': '#c00');
  4.     }
  5.   };
  6.  
  7. EventSelectors.start(Rules);

Simplification makes me happy. I'm a convert.

Posted in Blog, Technology.

Tagged with , , , , , , , , , , , .


One Response

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

Continuing the Discussion

  1. BorkWeb » Practicing What I Preach linked to this post on March 24, 2006

    [...] Separation of Layout and Logic with event:Selectors [...]



Some HTML is OK

or, reply to this post via trackback.