3

Gostaria de adicionar um evento a várias classes diferentes, exemplo:

exemplo1.addEventListener('click', function(){
    //Evento bla bla
});

exemplo2.addEventListener('click', function(){
    //Evento bla bla
});

exemplo3.addEventListener('click', function(){
    //Evento bla bla
});

E para não criar código duplicado, gostaria de transformar esse event em algo como:

exemplo1.eventExample();
exemplo2.eventExample();
exemplo3.eventExample();

Este eventExample teria o:

addEventListener('click', function(){
    //Evento bla bla
});

Peço perdão se utilizei de algum termo errado, estou iniciando na programação!

Eu sei que poderia criar uma função com o mesmo código do evento e jogar dentro dos outros event listeners, mas queria aprender dessa maneira.

1 Resposta 1

3

Se você adicionar ouvintes de evento no JavaScript, há de adicionar um por vez. Pois não existe addEventListeners, somente addEventListener (no singular).

Essa duplicação raramente é problemática, mas se você realmente quiser se livrar dela, pode criar um array com os elementos a receberem o listener e iterar sobre eles, adicionando individualmente em uma única linha. A ressalva é que você compartilhará o mesmo handler entre todos eles, mas esse parece ser o requisito da pergunta.

Algo assim:

function eventHandler(event) {
  // Faça algo aqui.
}

[example1, example2, example3].forEach((example) =>
  example.addEventListener('click', eventHandler));

Veja um exemplo funcional:

const el1 = document.getElementById('el-1');
const el2 = document.getElementById('el-2');

function eventHandler(event) {
  console.log('Clicou em:', event.currentTarget.textContent);
}

[el1, el2].forEach((el) =>
  el.addEventListener('click', eventHandler));
<a href="#" id="el-1">Clique! (a tag)</a>
<button id="el-2">Clique! (button tag)</button>

Você também pode encontrar por aí "recomendações" para modificar o prototype de NodeList (ou construtor similar) visando à adição de um novo método (como addEventListeners), mas isso raramente é necessário e sequer é boa ideia, já que pode trazer problemas. Explico-os em mais detalhes aqui.

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 .