1

Eu gostaria de saber por qual motivo essa função está sendo executada antes mesmo do click.

function teste(){
    console.log("teste");
}

addEventListener("click", teste());

2 Respostas 2

2

addEventListener deve receber uma função (ou um EventListener) no segundo parâmetro.

Mas ao fazer teste() (com os parênteses), você está chamando a função (executando-a), e o retorno dela é passado para addEventListener (no caso, a função não retorna nada, mas o que importa aqui é o fato de que você está executando a função, quando na verdade deveria passá-la como parâmetro).

Para passar a função como parâmetro, basta retirar os parênteses. Exemplo:

function teste(){
    console.log("teste");
}

document.getElementById('clica').addEventListener("click", teste);
//                                       sem os parênteses ^^^^^
<div id="clica">Clique em mim</div>

Com isso, addEventListener recebe a função que será executada quando o evento click ocorrer.

Colocando teste sem parênteses estou indicando que a função que vai ser executada é teste, mas ela não deve ser executada agora (no momento em que addEventListener é chamado), e sim quando o evento click ocorre.

4
  • Realmente voce esta 100% certo! funcionou perfeitamente sem os (), mas por que ele funcionou sem os () sendo que isso que executa uma funcao? o fato seria, o () executa a funcao, e quem deve executar a funcao seria o evento do addeventlistner? eu colocando nao colocando os parentes teste ele meio que fica aguardando uma execucao por alguma funcao? que no caso seria a de callback do listner? desculpe se eu nao soube me expressar
    – user70904
    Commented 8/04/2019 às 13:33
  • 1
    @BrunoBafilli Porque teste (sem parênteses) é uma referência para a função (é como se fosse uma "variável" que "contém" a função) . Já teste() (com parênteses) é uma chamada para a função (estou de fato executando ela). Adicionei uma explicação na resposta, veja se esclarece sua dúvida
    – hkotsubo
    Commented 8/04/2019 às 13:37
  • 1
    A responsabilidade de executar a função é do EventListener, por isso não se usa parênteses. Digamos que é o próprio EventListener que "coloca os parênteses" na função no momento apropriado. É um callback, como você mencionou. Commented 8/04/2019 às 13:39
  • 1
    Otima explicacao, eu agradeco muito pela atencao e disposicao de tempo para a explicacao, tenha um otimo dia e bons estudos para todos.
    – user70904
    Commented 8/04/2019 às 13:48
0

A onde ele tem que ser clicado? Você não definiu isso.

Exemplo, supondo que queira clicar em um botão:

document.querySelector('button').addEventListener('click', function() {
  alert('Botão foi clicado!');
});
button {
  box-shadow: none;
  background-color: #3e3e3e;
  color: #FFF;
  padding: 15px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  width: 100%;
  max-width: 150px;
}
<button>Clique</button>

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