addeventlistener executes a function even before it is called

Asked

Viewed 134 times

1

I would like to know why this function is being executed even before the click.

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

addEventListener("click", teste());
javascript

2 answers

1


addEventListener must receive a function (or a EventListener) in the second parameter.

But in doing teste() (with the parentheses), you are calling for the function (executing her), and her return is passed on to addEventListener (in this case, the function does not return anything, but what matters here is the fact that you are running the function, when in fact you should pass it as parameter).

To pass the function as a parameter, simply remove the parentheses. Example:

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

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

Thereby, addEventListener receives the function that will be executed when the event click occur.

Putting teste without parentheses I am indicating that the function that will be executed is teste, but it should not be executed now (at the time when addEventListener is called), and yes when the event click occurs.

  • Really See this 100% right! worked perfectly without the (), but why did it work without the () being that it performs a function? the fact would be, the () performs the function, and who should perform the function would be the addeventlistner event? I putting not putting the relatives test it kind of waits for an execution for some function? which in case would be the listner callback? I’m sorry if I didn’t know how to express myself

  • 1

    @Brunobafilli Because teste (without parentheses) is a reference to the function (it is like a "variable" that "contains" the function). Already teste() (parentheses) is a call to the function (I’m actually running it). I added an explanation to the answer, see if it clarifies your question

  • 1

    The responsibility to perform the function is Eventlistener, so no parentheses are used. Let’s say that it is the Eventlistener himself who "puts the parentheses" in the function at the appropriate time. It is a callback, as you mentioned.

  • 1

    Great explanation, I graduate a lot by the attention and time disposition for the explanation, have a great day and good studies for all.

  • If you can explain the reason for the negative, thank you, I’ll be happy to correct the problem

0

Where does it have to be clicked? You didn’t set this.

Example, suppose you want to click a button:

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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.