Skip to content

Instantly share code, notes, and snippets.

@rssilva
Last active Dec 11, 2015
Embed
What would you like to do?
Js of post number 22 on dailydevtips.com!
//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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment