Basic JS Question, Arrow Function with a callback using parameters in addEventListener

Question

I have a basic function here. I want to be able to pass parameters into it. However, it is being called by the addEventListener. Now, after reading on here and researching I got it to work so that if I put the TOP option in - it works. When I use the bottom option, just below it -it does not work. (Not if I want to use parameters). I just am wondering a basic explanation as to why the arrow function with a callback can take parameters, how is this going round exactly? Not sure I am explaining my question well.

for (i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', (e) => imgChoose(e, i));
}

for (i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', imgChoose);
}

var i = 0;

function imgChoose(e, i) {
  var test = dots[i].className;
  console.log(e);
}

Nicholas Tower · Accepted Answer · 2022-04-12 22:05:20Z

3

It's got nothing to do with arrow functions specifically, you can use normal functions too. What matters is that when addEventListener calls your function, it will pass in exactly one parameter: the event. If you want to then call a function with two parameters you can, but you must write that code yourself.

Here's how it would look with a regular function:

dots[i].addEventListener('click', function (e) { imgChoose(e, i) });

P.S.: as written, you have a single variable i which is being used for all the click callbacks. So they're all going to use the final value of i, which will be equal to dots.length. You should create i in the initialization of your loop, and make sure to use let, not var.

for (let i = 0; i < dots.length; i++) {

edited Apr 12, 2022 at 22:05

answered Apr 12, 2022 at 22:00

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

Collectives™ on Stack Overflow

Basic JS Question, Arrow Function with a callback using parameters in addEventListener

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related