CODEWITHSUNDEEP
javascriptecmascript-6arrow-functions
philosopher
philosopher

Reputation: 1151

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

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:

  1. when should I use arrow functions in ecmascript-6
  2. When 'Not' to Use Arrow Functions - Dmitri Pavlutin
  3. When You Should Not Use Arrow Functions - Javascript Tutorial

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?

Upvotes: 0

Views: 823

Answers (1)

Felix Kling
Felix Kling

Reputation: 816462

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 ;)

Upvotes: 2

Related Questions