7

Gostaria de saber de que maneira vocês adicionariam um evento clique a todos os links com a mesma classe sem utilizar jQuery, e sem que este evento clique esteja inserido dentro de um loop for.

O motivo disso é este: don't use functions inside a loop; pelo que vi na web afora, fazer uma função dentro de um loop é uma má prática, além disso pode causar alguns problemas de performance.

Como fazer então?

5
  • 2
    No próprio link que você passou tem uma solução pro seu problema.... Commented 10/02/2015 às 12:06
  • mas gostaria de saber de outras alternativas À este link. Commented 10/02/2015 às 12:10
  • @user3632930, acredito que você entendeu errado, o problema não é utilizar um loop para associar uma função ao click, mas sim instanciar uma função dentro de um loop. Commented 10/02/2015 às 12:12
  • @TobyMosque ah sim, pelo que vi instanciar uma função dentro de um loop pode fazer com que, essa função seja instanciada várias vezes correto? Commented 10/02/2015 às 12:21
  • sim, é isto mesmo, instanciando dentro do for, você terá uma função diferente para cada elemento, caso você instancie fora do for, você terá a mesma função para todos os elementos. Commented 10/02/2015 às 13:19

3 Respostas 3

10

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

A alternativa passada pelo link já é a melhor alternativa, que consiste em declarar uma função

function click(param) { ... }

e passar sua referência aos elementos desejados:

for (var i=0; i<Elementos.lenght; i++) { Elementos[i].addEventListener("click", click) };

O que é interessante explicar é o motivo pelo qual esta solução é a melhor: Ela utiliza apenas uma única instância da função click. Em contrapartida, quando fazemos desta forma (Código extraído do link):

var elems = document.getElementsByClassName("myClass"), i;

for (i = 0; i < elems.length; i++) {
    (function (iCopy) {
        "use strict";
        elems[i].addEventListener("click", function () {
            this.innerHTML = iCopy;
        });
    }(i));
}

Criamos N instancias da mesma função, o que não faz sentido já que o comportamento é o mesmo e estaremos usando muito mais memória atoa.

2
4

Você pode usar a função nativa do JavaScript getElementsByClassName, por exemplo:

for(var elem in document.getElementsByClassName('BUTTON')) {
  elem.click = function () {
    //seu codigo aqui
  };
}

O objeto document tem outros getElement(s)By, como por Name, TagName, Id e TagNameNS, este último precisa de um namespace junto ao nome da tag.

Creio que o código JS não esteja 100%, mas a ideia em geral está correta.

Mas desse modo feito acima, estamos criando várias cópias da função, o que é péssimo para a memória. Então, a melhor coisa a se fazer é criar a função fora do loop, e atribuirmos ela ao evento de click, desse modo:

var metodo = function () {
  //Seu codigo aqui
};

for(var elem in document.getElementsByClassName('PLACEHOLDER')) {
  elem.click = metodo;
}
1
  • Acho que consertei agora. @bfavaretto
    – mutlei
    Commented 10/02/2015 às 16:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .