passing this through addEventListener

Question

I have a function that was previously working; but I have to make it wait now with setTimeout. I thought I could just add an arrow function as the callback for the eventListener and still be able to pass this as the button for the context but I am getting an error.

button.addEventListener("click", () => {
    setTimeout(checkAndRespond,1500);
});

//This is the line that throws the error
checkAndRespond = async function () {
    ...
    const row = this.parentElement.parentElement;
    ...
}

How am I supposed to pass this into the inner function?
Is the setTimeout context being passed in as this to checkAndRespond?
Is there something i am not understanding about how arrow functions work?

`setTimeout` does not pass a `this`. And your arrow function drops its `this` anyway. — SLaks, Apr 11 '19 at 16:56
@SLaks regardless, I am looking for the button context and how to get that — 0TTT0, Apr 11 '19 at 16:57

Jonas Wilms · Accepted Answer · 2019-04-11T17:02:56.750

How am I supposed to pass this into the inner function?

Which this ? Arrow functions take the context (this) of their parent functions, which is the global scope in this case and for that this points to window. If you want to call a function dynamically inside a certain context (that is what the addEventListeners do) you have to use a regular function.

Is the setTimeout context being passed in as this to checkAndRespond?

No. You have to .bind the context manually:

 button.addEventListener("click", function() { // <- now we can work with this here
   setTimeout(checkAndRespond.bind(this), 1500); // <- and bind it
 });

Or you use the arrow functions behaviour as described above, and pass this as an argument:

 button.addEventListener("click", function() {
   setTimeout(() => checkAndRespond(this), 1500);
 });

 async function checkAndRespond(button) {
   //...
 }

Sidenotes:

You could also just use button instead of this, but that would probably be too easy.

checkAndRespond = is an undeclared (!!) variable, always declare them!

passing this through addEventListener

1 Answers1