Pass parameters to javascript functions which is bind to events

Question

I have a function like this :

 var that = this;
 this.context.on('focus', function(i) {
     var htmlElement = ele;
     var style = {left: 'auto', color: '#000000'};

     if(i !== null) {
         i = that.context.size()/2;
         style.left = i + 'px';
         //find htmlElement in DOM and apply style to it
     }
});

The htmlElement and style will var for me in different calls. I need to pass an option such as

var options = {style: someVaue, htmlELement: somelement}

to the function so that it could be called multiple times with different options. If I pass the options like this :

var that = this;
this.context.on('focus', function(i, options) {
    //use options.style and options.htmlElement 
});

It doesn't work that way. Clearly I am doing something wrong since the function bind to focus event of this.context has i as an param but can't accept any other param. Any kind of help/suggestion is appreciated.

In this situation I normally add `data-*` attributes to the element and then retrieve them under the needed event handler. — Rory McCrossan, May 12 '15 at 09:59
@RoryMcCrossan It is good solution only for HTML5 code cuz the W3C validation. — Jazi, May 12 '15 at 10:01
@RoryMcCrossan : Retrieving element is not my problem. Passing the same to a function which could accept arguments is the one. — Araknid, May 12 '15 at 10:01
@KrzysztofTrzos that's correct, although HTML5 is widely supported now. — Rory McCrossan, May 12 '15 at 10:02
@Yogita088 that's what I'm saying - you can't pass extra parameters to the event handler. You would need to read the properties from the element which raised the event. — Rory McCrossan, May 12 '15 at 10:03
1. As soon as you use a `var that = this` construct in JavaScript to force-feed a closure with some reference, you should really rethink the way you handle object references. Please use `.bind()` instead. 2. Also, are you sure about the comparison expression `i !== null` and then completely discarding the value of `i`? — Anders Marzi Tornblad, May 12 '15 at 10:03
Is it what you are looking for: `this.context.on('focus', function(options, e) { //use options.style and options.htmlElement }.bind(this, options));` ? — A. Wolff, May 12 '15 at 10:06
Ah, I'm sorry if I was unclear. I am talking about JavaScript `bind`. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind Look at @A.Wolff 's comment — Anders Marzi Tornblad, May 12 '15 at 10:07
@atornblad But i'm really not sure this answers question because i'm not sure to understand OP's expected behaviour. The Rory way using data seems more relevant as how i understand it imho. And why not setting `this.options = {...};` then use it in handler — A. Wolff, May 12 '15 at 10:13
@atornblad: point 1 is taken care of. I am quite comfortable with closures. Point 2: yes, if i is null nothing has to be done. — Araknid, May 12 '15 at 10:21
@A.Wolff: Yes, I am looking for something like `this.context.on('focus', function(options, e) { //use options.style and options.htmlElement }.bind(this, options))` — Araknid, May 12 '15 at 10:23

score 0 · Accepted Answer · answered May 12 '15 at 17:26

I think I have worked out a solution. Thanks everyone for their help. Here is how the options could be passed:

var that = this;
this.context.on('focus', function(i) {
    var options = {i: i, style: someValue, htmlElement: someElement};
    that.setStyle(options);
});

setStyle: function(options) {
    var htmlElement = options.htmlElement;
    var style = options.style;

    if(options.i !== null) {
        options.i = that.context.size()/2;
        style.left = i + 'px';
        //find htmlElement in DOM and apply style to it
    }
}

Please feel free to comment!!!

Pass parameters to javascript functions which is bind to events

1 Answers1