addEventListener + setTimeout

Question

It's the first time I encounter such an issue with the addEventListener() method. When I try to use it with a setTimeout, the function is automatically called, even though the addEventListener has a "click" property.

<button id="test">Test</button>

document.getElementById("test").addEventListener("click", setTimeout(myFunc, 2000));

function myFunc() {
  console.log("Hello");
}

Answer 1

This would be what you want.

 document.getElementById("test").addEventListener("click", function(){setTimeout(myFunc, 2000)}); function myFunc() { console.log("Hello"); } 

 <button id="test">Test</button> 

Answer 2

You can use setTimeout inside the function that you call. Jsfiddle

document.getElementById("test").addEventListener("click", myFunc);

function myFunc() {
    setTimeout(function(){
      console.log("Hello");
    }, 6000);
}

Answer 3

You could keep the exact same code you have now but curry your function via bind vs. trying to invoke it while also trying to pass it as an argument.

 document.getElementById("test").addEventListener("click", setTimeout.bind(null, myFunc, 2000)); function myFunc() { console.log("Hello"); } 

 <button id="test">Click</button>