Javascript event delegation

Easier, faster, scalable and cross-browser

NOTE: No "onload" event is used to add the functionalities to this page.

Alternate rows color
Alternate columns color
XXXXXX XXXXXX
XXXXXX XXXXXX
XXXXXX XXXXXX
XXXXXX XXXXXX
XXXXXX XXXXXX
XXXXXX XXXXXX
XXXXXX XXXXXX
XXXXXX XXXXXX

List of delegate rules applied above


var rulesets = new Object({
 'input': {
  focus:
   // clear existing value
   function (e) { this.value=''; },
  blur:
   // validate input value
   function (e) {
    // wrong or missing value
    if(this.value==''){ this.style.border='2px solid #f00'; }
    // correct or existing value
    else{ this.style.border=''; }
   },
  mouseout:
   // unset highlight
   function () { this.style.backgroundColor=''; },
  mouseover:
   // unset highlight
   function (){ this.style.backgroundColor='#ecf'; }
 },
 'ul li:nth-of-type(2n), table td:nth-of-type(2n)': {
  mouseout:
   // unset highlight
   function () { this.style.backgroundColor=''; },
  mouseover:
   // set highlight
   function () { this.style.backgroundColor='#fc6'; }
 },
 'ul li:nth-of-type(2n1), table td:nth-of-type(2n1)': {
  mouseout:
   // unset highlight
   function () { this.style.backgroundColor=''; },
  mouseover:
   // set highlight
   function () { this.style.backgroundColor='#396'; }
 }
});

var i,j;
for (i in rulesets) {
 if (typeof i == 'string') {
  for (j in rulesets[i]) {
   NW.Event.appendDelegate(i,j,rulesets[i][j]);
  }
 }
}