fazer uma função dentro de um loop é uma má prática, além disso pode causar alguns problemas de performance
Tem alguma verdade nesses seus pressupostos, mas também tem um mal-entendido muito grande. É preciso compreender o que acontece quando funções são criadas dentro de um loop, para saber julgar quando usar isso e quando não usar.
É mesmo necessário criar funções dentro do loop?
Essa é a primeira pergunta que você deve se fazer. Não que seja má prática ou que necessariamente vá causar problemas de performance. Em primeiro lugar, pode ser simplesmente desnecessário.
O comportamento de todos os seus elementos deverá ser exatamente igual? É possível escrever uma única função que sirva para tratar o evento de todos eles, sem usar nada que dependa do loop (o i
)? Se for, você não precisa mesmo criar várias funções. Isso seria um desperdício de recursos, já que cada função criada vai ocupar memória (esse um dos tais "problemas de performance" de que tanto falam, e ele pode ser irrelevante se a quantidade de elementos recebendo a função de clique não for muito grande).
Tem duas maneiras de se usar a mesma função para associação de eventos como click
a vários elementos:
1. Associar a função a cada elemento individualmente
Isso é bem simples de fazer, você usa um loop apenas para a associação, mas a função é declarada fora dele:
// Função que alerta o ID da div clicada
function divClicada() {
// dentro de um event listener, this é o elemento
// associado ao listener
alert('A div #' + this.id + ' foi clicada!');
}
// Todas as divs da página
var divs = document.querySelectorAll('div');
// Associação de cada div à função
for(var i=0; i<divs.length; i++) {
divs[i].onclick = divClicada; // Sem parênteses!
}
Mas isso ainda pode deixar a página pesada, se houver muitos elementos no loop. Mesmo você criando uma única função, ainda precisa associar os elementos a ela um a um, então ainda pode sofrer com o excesso de associações, mesmo essas associações apontando para o mesmo destino. Existe uma maneira de se evitar isso, que é preferível quando estiver lidando com muitos elementos.
2. Delegação de eventos
No DOM certos eventos se propagam ("borbulham") pela hierarquia de objetos. Considere a seguinte estrutura:
<div id="avo">
<div id="pai">
<div id="filho"></div>
</div>
</div>
Um clique no elemento #filho
pode ser capturado em qualquer uma das 3 divs do exemplo, pois o evento vai subindo pela árvore até chegar no topo (até chegar no elemento window
):
document.getElementById('avo').onclick = function(e) {
alert(e.target.id);
};
Demo
Repare no e
que a função recebe (não precisa chamar e
, você pode usar qualquer nome válido). Ele é passado pelo próprio navegador, e representa o evento. A propriedade target
representa o elemento que originou o evento. Com isso então é possível escutar o clique em diversos elementos, criando uma única associação entre um ancestral dele na hierarquia e a função que trata o evento.
Essa técnica se chama delegação de eventos, e é muito usada quando o conteúdo é inserido dinamicamente na página (por exemplo, via AJAX). Isso porque para se associar um listener a um elemento, ele precisa existir no momento da associação. Imagine uma div com 3 outras dentro, cada uma das 3 com seu próprio onclick
. Se você troca o conteúdo da div (por exemplo, atualiza uma lista de notícias recentes), os onclicks originais são perdidos. Mas se você tiver um único listener de click
delegado ao elemento de fora, essa mesma função continua servindo. Isso é muito útil e muito prático.
Sim, é necessário criar funções dentro do loop. E agora?
Apesar dos muitos casos em que dá pra evitar, às vezes é sim preciso criar funções dentro de um loop. Porém isso pode não funcionar como você espera. Considere os 3 inputs abaixo:
<input value="valor original 1" />
<input value="valor original 2" />
<input value="valor original 3" />
Quero criar um listener para o evento blur
desses inputs, para que quando percam o foco restaurem seus valores originais. Existe como fazer isso com uma única função, mas considere que essa opção não existe. Uma abordagem ingênua poderia ser esta:
var inputs = document.querySelectorAll('input');
for(var i=0; i<inputs.length; i++) {
inputs[i].onblur = function() {
this.value = inputs[i].value;
}
}
Demo
Só que esse código não funciona. Se você olhar o console do navegador, verá um erro como este na hora do blur:
Uncaught TypeError: Cannot read property 'value' of undefined
Isso quer dizer que no momento do blur inputs[i]
não apontava para o input que acabou de perder o foco; em vez disso, continha o valor undefined
. Isso ocorre por uma questão de escopo: todas as 3 funções são criadas no mesmo escopo, e apontam a mesma variável i
. O valor de i
no momento do blur (ou seja, depois do fim do loop), será sempre 3
. E inputs[3]
não existe, já que no nosso exemplo só há 3 inputs (com índices de 0
a 2
). Por isso, o valor de inputs[i]
naquele momento é undefined
.
Se você leu o conteúdo do último link, já deve saber qual é a solução para isso: introduzir uma outra função, chamada de dentro do loop e para capturar o valor atual de i
a cada passo. Existem duas maneiras de se fazer isso:
1. Criando uma função que retorna outra
function criaListener(indiceDoElemento) {
return function() {
this.value = inputs[indiceDoElemento].value;
}
}
var inputs = document.querySelectorAll('input');
for(var i=0; i<inputs.length; i++) {
inputs[i].onblur = criaListener(i);
}
Isso é bastante limpo e legível. Mas tem horas em que a gente quer resolver tudo dentro do loop mesmo.
2. Utilizando uma função imediatamente invocada (IIFE)
O código abaixo funciona como o do exemplo anterior, porém cria e imediatamente executa uma função dentro do loop mesmo:
var inputs = document.querySelectorAll('input');
for(var i=0; i<inputs.length; i++) {
inputs[i].onblur = (function(indiceDoElemento) {
return function() {
this.value = inputs[indiceDoElemento].value;
}
}(i));
}
Também é possível evitar o retorno de função, da maneira que se vê segundo exemplo da resposta do Edgar Muniz Berlinck:
var inputs = document.querySelectorAll('input');
for(var i=0; i<inputs.length; i++) {
(function(indiceDoElemento) {
inputs[i].onblur = function() {
this.value = inputs[indiceDoElemento].value;
}
}(i));
}