Why we not use () while calling function in EventListener in JavaScript

Question

I am new to JavaScript. I read a code which is:

document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}

I read the documentation, in this I get that the second parameter of addEventListener would be a function like the bellow (here after function we use () brackets)

document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = Date();
});

according to my knowledge, we must use () after a function which is not in the first example. Even if I use than it doesn't work. So my question is why we can't use () if we create a separate function. I hope you understand my question.

Aplet123 · Accepted Answer · 2020-04-02 20:29:42Z

3

The parentheses mean different things in these scenarios. The parentheses that go after the function keyword denote a list of arguments that you provide to the function, e.g. function(a, b, c) signifies that the function takes 3 arguments, a, b, and c. The parentheses that go after displayDate represent the fact that you are calling the function with no parameters, and passing the return value to addEventListener. Since displayDate returns undefined, you are essentially setting undefined as an event listener, which will do nothing.

answered Apr 2, 2020 at 20:29

Aplet123

35.8k1 gold badge41 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asad Seeker Over a year ago

thanks for answer ... but if i do this than it also not work as it expected to do.

var test = "hello" document.getElementById("myBtn").addEventListener("click", displayDate(test));  function displayDate(param) {   document.getElementById("demo").innerHTML = Date();   alert(param) }

Aplet123 Over a year ago

Well yes because you're still calling the function, and it's not returning another function. addEventListener requires a function as the second argument, not the value that you get from calling a function.

Collectives™ on Stack Overflow

Why we not use () while calling function in EventListener in JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related