繁体   English   中英

在addeventlistener中使用此关键字调用javascript类方法

[英]Calling javascript class method using this keyword in addeventlistener

我想使用带有使用此关键字的参数的addEventListener调用javascript类方法

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

在这里,它没有参数。但是我想要带参数。 我想调用_this.getItemList('2','4')

该代码是参考

stackoverflow addeventlistener这个

尝试对参数化函数使用此语法。 单击此处了解更多详细信息。

 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); } 

您可以使用arguments伪参数中onClickBound获得在被传递的运行时参数,然后使用apply调用getItemList

像这样的东西(未经测试):

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是在每个函数中预定义的伪数组,其中包含函数的参数。 (它不是 Array ,但其作用很像Arrayapply很高兴接受它。)

applycall的等效项,但是您传入类似数组的东西( Arrayarguments )以指定参数,而不是在调用中将它们作为离散的args提供。


更新 :我想我可能误解了您的问题。 让我们再试一次:

如果要在函数中“烧入”(curry)参数,可以使用函数工厂函数(创建函数的函数)来执行此操作:

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);
    };
}

这比标准的curry-style函数要复杂一些,因为我们在事件参数的开头保留了这个空白。

如果您不希望使用事件对象(您曾说过要调用_this.getItemList('2','4') ),则此方法应该起作用:

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);
    };
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM