Javascript event delegation

Easier, faster, scalable and cross-browser

No "onload" event is used to bootstrap the funcionality of the elements in this page.

focus/blur events are captured/delegated on these INPUTs of type "text"

click and mouseover/mousout events are captured/delegated on TDs and LIs,
some mouseover is dispatched programatically at "onload" to show this feature.

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[type="text"]': {
		focus:
			// clear default message text
			function (e) {
				if(this.value.indexOf('Type')==0){ 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(even), table td:nth-of-type(even)': {
		mouseout:
			// unset highlight
			function () { this.style.backgroundColor=''; },
		mouseover:
			// set highlight
			function () { this.style.backgroundColor='#fc6'; }
	},
	'ul li:nth-of-type(odd), table td:nth-of-type(odd)': {
		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]) {
			$(document.documentElement).addDelegate(i,j,rulesets[i][j]);
		}
	}
}