Javascript addEventListener : pass argument to external event handler

Question

In Javascript, when I use addEventListener, I would like to call an external method and pass it an event arg:

var secondParam= "titi";
element.addEventListener("keydown", handleEventFunc(event, secondParam));
   ...
handleEventFunc: function (eventArg, secondParam) {
    var key = event.keyCode;
    var toto = secondParam;
    //do things
}

It would be working equivalent if I were using closure:

var secondParam= "titi";
element.addEventListener("keydown", function (event) {
        var key = event.keyCode;
        var toto = secondParam;
        //do things
}

Do you know how to do this?

It's not you who is supposed to call the function. It's the browser, when the event happens. Hence you have to give the browser a function to call. — Felix Kling
– Felix Kling, Commented Sep 20, 2017 at 16:21

adeneo · Accepted Answer · 2017-09-20 16:20:41Z

2

This happens automagically if you just reference the function instead of calling it, as any arguments will be passed by the calling context, in this case the event handler

element.addEventListener("keydown", obj.handleEventFunc);

var obj = {
    handleEventFunc: function (event) { // tada, now works
        var key = event.keyCode; // keep the names the same
        //do things
    }
}

answered Sep 20, 2017 at 16:20

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Collectives™ on Stack Overflow

Javascript addEventListener : pass argument to external event handler

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related