Javascript event delegation

Easier, faster, scalable and cross-browser

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

Age:

Name:

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]);
  }
 }
}