Can I pass more arguments into event handler functions in Javascript?

Question

I have been trying to find out more about mouse events such as onmouseover, onmouseout and onmousemove but there is not much info. It seems these event handlers by default have a single argument, the event its self.

element.onmouseover = mouseoverFunction

function mouseoverFunction( event ) {
    // Do stuff here
}

However I want to be able to pass other arguments to into the function.

function mouseoverFunction( event, moreArgs ) {
    // Do stuff here
}

How do I pass the event argument and additional arguments to the function?

Also is it ok to pass more arguments into an event handler function?

elclanrs · Accepted Answer · 2015-01-20 20:42:15Z

6

You can make a higher-order function:

function mouseover(arg1, arg2) {
  return function(event) {
    // Do stuff here
  }
}

element.addEventListener('mouseover', mouseover(1, 2))

answered Jan 20, 2015 at 20:42

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

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

3 Comments

McShaman Over a year ago

I did look at that but saw it was not supported by IE8 and under

elclanrs Over a year ago

Look for an addEventListener polyfill, or use the onmouseover attribute as you were doing.

Valary o Over a year ago

@elclanrs, I was looking forward to call & apply methods. Is this possible to do that using them. I couldn't pass in event into the function if I pass in other arguments

Collectives™ on Stack Overflow

Can I pass more arguments into event handler functions in Javascript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related