Calling javascript class method using this keyword in addeventlistener

Question

I want to call the javascript class method using addEventListener with parameters using this keyword

 var _this = this;
function onClickBound(e) {
    _this.getItemList.call(text_box, e || window.event);
}
if (text_box.addEventListener) {
    text_box.addEventListener("change", onClickBound, false);
}

Here it is working for without parameters .But i want with parameters .ie,. i want to call _this.getItemList('2','4')

The code is with reference to the

stackoverflow addeventlistener this

Answer 1

try using this syntax for parametrised functions. click here for more details.

 var _this = this; function onClickBound(e) { _this.getItemList.call(text_box, e || window.event); } if (text_box.addEventListener) { text_box.addEventListener("change", function(){onClickBound("x")}, false); } 

Answer 2

You can use the arguments pseudo-argument within onClickBound to get at the runtime arguments that were passed, and then use apply to call getItemList .

Something like this (not tested):

var _this = this;
function onClickBound(e) {
    arguments[0] = e || window.event; // Handle IE-ism
    _this.getItemList.apply(text_box, arguments);
}
if (text_box.addEventListener) {
    text_box.addEventListener("change", onClickBound, false);
}

arguments is a pseudo-array that's predefined within every function and contains the arguments to the function. (It is not an Array , but it acts a lot like one and apply is happy to accept it.)

apply is the equivalent of call , but where you pass in an array-like-thing ( Array or arguments ) to specify the arguments, rather than supplying them as discrete args in the call.

---

Update : I think I may have misunderstood your question. Let's try that again:

If you want to "burn in" (curry) arguments into the function, you can use a function factory function (a function that creates functions) to do that:

if (text_box.addEventListener) {
    text_box.addEventListener(
        "change",
        createBoundEventHandler(this.getItemList, text_box, '2', '4'),
        false
    );
}
// Elsewhere with your other utility stuff
function createBoundEventHandler(f, thisArg) {
    var args, index;

    // Copy all but the first two args; leave a
    // gap at the beginning for the event argument
    args = [];
    for (index = 2; index < arguments.length; ++index) {
        args[index-1] = arguments[index];
    }

    // Return the function
    return function(e) {
        args[0] = e || window.event; // Handle IE-ism
        return f.apply(thisArg, args);
    };
}

That's a bit more complicated than the standard curry-style function would be, because we're leaving that gap at the beginning for the event argument.

If you don't want the event object (you did say at one point that you want to call _this.getItemList('2','4') ), this should work:

if (text_box.addEventListener) {
    text_box.addEventListener(
        "change",
        bindAndCurry(this.getItemList, text_box, '2', '4'),
        false
    );
}
// Elsewhere with your other utility stuff
function bindAndCurry(f, thisArg) {
    var args, index;

    // Copy all but the first two args
    args = [];
    for (index = 2; index < arguments.length; ++index) {
        args.push(arguments[index]);
    }

    // Return the function
    return function() {
        return f.apply(thisArg, args);
    };
}