Event function declaration

Question

Im trying to understand the declaration of the event handler and the function declaration in this post: https://stackoverflow.com/a/46418688/7727532

Im pretty new to Javascript and jQuery and trying to understand. What I do know is that you declare like the following

$('#clickMe').on('click', doSomeThing(e));

function doSomeThing(e){
 console.log(e);
}

The first part I dont understand is

(e) => this._handleScaling(e)

What is happening here? We catch the current object and sending it to function _handleScaling()? But why do we have "(e) =>" before?

Second part is

_handleScaling(e) {

Which if Im right is a local function inside another? Because of the underline start. So maybe the code in the link isnt telling the whole picture?

Possible duplicate of [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch) — Suraj Rao, Nov 10 '17 at 08:57
`$('#clickMe').on('click', doSomeThing(e));` is wrong. It calls `doSomeThing` immediately and passes its return value to `.on`. Whenever you have "pass" a function *call* as argument to another function (`foo(bar())`, the "inner" function call is evaluated first and its return value is passed to the "outer" call. I.e. `bar` is called first and its return value is passed to `foo`. Event handlers however expect a function to be passed. — Felix Kling, Nov 10 '17 at 08:58
Related: [What's the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?](https://stackoverflow.com/q/24900875/218196) — Felix Kling, Nov 10 '17 at 09:01
this is actually typescript syntax, and doesn't add anything to event handling itself. You're not obliged to use typescript for this, you can stick to basic JS if you know it. Just my opinion, but typescript adds more confusion than actual real improvements, if you already know well the prototype nature. — Kaddath, Nov 10 '17 at 09:02
@Kaddath not exactly, [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) are also a part of ES6 — Suraj Rao, Nov 10 '17 at 09:03
@SurajRao you're right, i should have a deeper look at it, however, i found no real use case where i could need arrow functions instead of regular ones yet.. — Kaddath, Nov 10 '17 at 09:12
@Kaddath alright :D maybe https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6 is the right link for you — Suraj Rao, Nov 10 '17 at 09:13

score 0 · Accepted Answer · answered Nov 10 '17 at 09:01

You need to give function reference rather than function's return value

Replace

$('#clickMe').on('click', doSomeThing(e));

with

$('#clickMe').on('click', doSomeThing); //e is the event object will be automatically passed on to the event handler

The first part I dont understand is

(e) => this._handleScaling(e) What is happening here? We catch the current object and sending it to function _handleScaling()? But why do we have "(e) =>" before?

No, _handleScaling is only passed e (event object) so that it can get access to element on which this event has been triggered using e.target since with arrow function this will refer to scope in which this arrow function is defined.

Event function declaration

1 Answers1