Javascript automatic function execution

Question

If i'm writing event in this way, action executes when it should:

 document.getElementById('myElem').onmousedown = (e) => {
     console.log('fired!')
    }

But if i'm writing same stuff in other way, action executes when page is loaded, once:

let HandleEvent = (event) => {
 console.log('fired!')
}
document.getElementById('myElem').onmousedown = HandleEvent(event)

UPD: Ofcourse it is just example, HandleEvent function will have much more complex logic.

My questions is:

Why?
How to make it work properly?

onmousedown expects a function reference, but what you're passing is the returned value of the function (which is undefined) because you're invoking it. Try document.getElementById('myElem').onmousedown = HandleEvent instead. — haim770
– haim770, Commented Jul 7, 2016 at 11:12

Ruan Mendes · Accepted Answer · 2016-07-07 11:15:45Z

6

document.getElementById('myElem').onmousedown = HandleEvent;

Would do what you want; you should not execute the handler when assigning it. You should just assign the function reference.

Then you can also assign it as the onload handler, or even call it yourself (if you are not relying on the event object)

answered Jul 7, 2016 at 11:15

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

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

Comments

Ben Aston · Accepted Answer · 2016-07-07 11:24:01Z

5

document.getElementById('myElem').onmousedown = HandleEvent;

To pass additional arguments you could use bind:

document.getElementById('myElem').onmousedown = HandleEvent.bind(null, argument1, argument2);

...or you could use a factory function:

document.getElementById('myElem').onmousedown = createHandler();

function createHandler() {
  var a = calculateA();
  var b = calculateA();
  return function handleEvent() {
     //use a and/or b
  };
}

There are other ways too. Precise code will depend on your use case.

edited Jul 7, 2016 at 11:24

answered Jul 7, 2016 at 11:13

Ben Aston

56k69 gold badges221 silver badges351 bronze badges

6 Comments

Src Over a year ago

how can i pass additional params to function?

gcampbell Over a year ago

@Src Function.prototype.bind

T.J. Crowder Over a year ago

@Src: That wasn't your question. Ben answered the question you asked. (And you can readily find an answer to that question by searching SO, where it's been very, very thoroughly answerd.)

Ruan Mendes Over a year ago

Function.bind or wrap it in a another function that calls HandleEvent passing it the parameters you want

Src Over a year ago

Works perfectly, thank you very much! I already accepted answer before you edited the question, so i think it would not be right to re accept it. sorry :\

|

Juanjo Salvador · Accepted Answer · 2016-07-07 11:15:57Z

2

You don't need the event.

let HandleEvent = (event) => 'fired!';
document.getElementById('myElem').onmousedown = HandleEvent

answered Jul 7, 2016 at 11:15

Juanjo Salvador

1,1131 gold badge15 silver badges34 bronze badges

Comments

Piyush.kapoor · Accepted Answer · 2016-07-07 11:14:14Z

1

Remove the event

let HandleEvent = (event) => {
 console.log('fired!')
}
document.getElementById('myElem').onmousedown = HandleEvent

answered Jul 7, 2016 at 11:14

Piyush.kapoor

6,8311 gold badge25 silver badges21 bronze badges

1 Comment

Ruan Mendes Over a year ago

Remove the event is not a very good description of what removing the parentheses does.

Marc · Accepted Answer · 2016-07-07 11:16:20Z

1

If you want to pass an attribute

let HandleEvent = (event) => {
 console.log('fired!')
}
document.getElementById('myElem').onmousedown = HandleEvent.bind(attribute)

answered Jul 7, 2016 at 11:16

Marc

3174 silver badges11 bronze badges

Comments

engineforce · Accepted Answer · 2016-07-07 11:31:53Z

0

What you did was assigning the result of HandleEvent() to the event, instead you should assign the function to it.

Correct statement:

document.getElementById('myElem').onmousedown = HandleEvent;

edited Jul 7, 2016 at 11:31

answered Jul 7, 2016 at 11:21

engineforce

3,0701 gold badge25 silver badges17 bronze badges

Collectives™ on Stack Overflow

Javascript automatic function execution

6 Answers 6

Comments

6 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

6 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related