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());
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.
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
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>