Why console.log() bypasses addEventListener?

Question

I have a button which on click is supposed to execute the addEventListener function. On the callback function part I directly use a console.log.

<button id="btnTrans">Translate</button>
var buttonTranslate = document.querySelector("#btnTrans");
buttonTranslate.addEventListener("click", console.log("clicked"));

as soon as the DOM loads, "clicked" appears on the console. Shouldn't it wait for the event to happen first?

It should be `buttonTranslate.addEventListener("click", e=>console.log("clicked"));` — Unmitigated, Apr 14 '21 at 19:05
You’re not attaching handler, Actually you called the console.log(). — Naren, Apr 14 '21 at 19:05
You're calling `console.log(...)`, then attempting to attach the *result* of that call as an event handler. — , Apr 14 '21 at 19:06

score 1 · Answer 1 · answered Apr 14 '21 at 19:05

1

The console.log is immediately executed because it is not wrapped in a function. Wrap it in a function:

buttonTranslate.addEventListener("click", () => { console.log("clicked") });

answered Apr 14 '21 at 19:05

MrCode

63,975
10
90
112

Why console.log() bypasses addEventListener?

1 Answers1