JavaScript addEventListener function with parameters [duplicate]

Question

I am wondering if there is a way to pass a function with parameters into an JS addEventListener?

I have tried directly binding a function with parameters to addEventListener, but the listener does not work and executes the function right away without the event being triggered.

document.getElementById("button1").addEventListener("click", test1("text I would like to pass"));

function test1(text) {
  console.log(text);
}

<button id="button1">Click Me</button>

The listener would work if the function bound does not contain any parameter:

document.getElementById("button1").addEventListener("click", test1);

function test1() {
  console.log("text I would like to pass");
}

<button id="button1">Click Me</button>

I have also tried doing the same thing using onclick but the same scenario happens. In that case, how do I bind a function with parameters to addEventListener then?

.addEventListener("click", () => test("text i would like to pass")); — Yousaf
– Yousaf, Commented Oct 13, 2020 at 15:30
Or .addEventListener("click", test.bind(null, "text i would like to pass")) — VLAZ
– VLAZ, Commented Oct 13, 2020 at 15:31

Andam · Accepted Answer · 2020-10-13 15:38:28Z

3

you can use () => { call your function here } or function(){ call your function here}

document.getElementById("button1")
.addEventListener("click", () => { test1("four");});

function test1(text) {
  console.log(text);
}

<button id="button1">Click Me</button>

answered Oct 13, 2020 at 15:38

Andam

2,1971 gold badge10 silver badges28 bronze badges

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

1 Comment

Guna Over a year ago

How would you remove the eventListener in this case?

Collectives™ on Stack Overflow

JavaScript addEventListener function with parameters [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related