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);
}
开发者_如何学Python
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
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);
};
}
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);
}
精彩评论