Using arrow functions and event.target with event handlers to get scope instead of normal functions and the this keyword?

Question

My preference of choice is to use arrow functions when writing JS.

I read many articles which describe when NOT to use arrow functions, including a question that was answered on StackOverflow:

All of these articles state that one should not use arrow functions when using eventHandlers since the scope of this gets set to global instead of the object that was clicked on. However, I have been using arrow functions with event handlers like follows:

button.addEventListener('click', (event) => {
        const target = event.target
}

event.target gives you scope of the event while using arrow functions. However, with so many articles recommending against using arrow functions in event handlers, I am wondering if there are any disadvantages to my approach that I may have missed?

No it's fine, like you have found out the context is on event.target too. — Keith, Nov 02 '20 at 14:17
Or you could just use the `button` variable which you have access to anyway. — Reyno, Nov 02 '20 at 14:18
@Reyno Just be aware, if button is a var in a loop, but people should be using let these days anyway. — Keith, Nov 02 '20 at 14:22

score 1 · Accepted Answer · answered Nov 02 '20 at 15:26

However, with so many articles recommending against using arrow functions in event handlers, I am wondering if there are any disadvantages to my approach that I may have missed?

It doesn't look like you have missed anything. You are not using any of the "features" that make arrow functions different from "normal" functions.

You are

not using this
not using arguments
not calling the function with new (and the browser doesn't either)

so you can choose either form.

If I remember correctly event.target didn't exist in older versions of Internet Explorer (< 9) (instead it was event.srcElement), but if you are using an arrow function you probably don't care about deprecated browsers ;)

Using arrow functions and event.target with event handlers to get scope instead of normal functions and the this keyword?

1 Answers1