Js of post number 22 on dailydevtips.com!

gistfile1.js

//hoje veremos mais um pouco sobre callbacks
//Se pararmos para analisar, esse recurso que vínhamos
//usando: window.onload = function... é na verdade um callback
//SIM! na verdade estamos passando uma função para ser executada
//quando os elementos já tiverem sido renderizados na janela

window.onload = function () {

	//Estamos criando um callback personalizado
	var meuCallback = function (event) {
		//Como você pode ver, o callback recebe event como parâmetro
		//e chama o método stopPropagation(). Explico depois...
		//event.stopPropagation(); //Essa linha servirá para alguma coisa daqui a pouco, deixe comentada por enquanto
		console.log(this); //imprimirá o this, escopo no qual o callback está sendo chamado
		
		//se o elemento tem a propriedade style...
		if (this.style) {
			//se a cor de fundo do elemento atual é diferente de rgb(85, 85, 85)...
			//esse if serve como uma "chave de on/off" da cor de fundo
			//se a cor for diferente de rgb(85, 85, 85), ela será setada como tal

			if (this.style.backgroundColor != 'rgb(85, 85, 85)') {
				this.style.backgroundColor = 'rgb(85, 85, 85)';
			} else {
				this.style.backgroundColor = 'rgb(204, 204, 204)';
			}
		}
		
	}

	var mainDiv = document.getElementById('mainDiv'), //document.getElementById para selecionar a div que está no document html
	divChildren = mainDiv.children, //divChildren recebe todos os filhos dessa div
	ul = divChildren.item(3), //ul recebe o quarto item (lembrando que começa a contagem do zero), no caso a ul
	ulChildren = ul.children; //ulChildren recebe todos os filhos de ul (todos os elementos li lá no html)
	
	//aqui passamos o nosso callback como onclick de vários elementos, sendo eles...
	mainDiv.onclick = meuCallback; //a div principal
	divChildren.item(0).onclick = meuCallback; //Botao 1, o primeiro filho de mainDiv
	divChildren.item(1).onclick = meuCallback; //Botao 2, o segundo filho de mainDiv
	divChildren.item(2).onclick = meuCallback; //Botao 3, o terceiro filho de mainDiv
	ul.onclick = meuCallback; //ul, que já tinha sido setada como variável na linha 33

	//Como ul tem três filhos (três li), todos os onclick destes
	//receberam o nosso callback
	ulChildren.item(0).onclick = meuCallback;
	ulChildren.item(1).onclick = meuCallback;
	ulChildren.item(2).onclick = meuCallback;

}