Question

HTML

<input type="text" id="test" />

<span>0</span>

的jQuery

var input = $('input#test');

input.bind('keyup', function() {
    doThis();
});

input.on('input', function() {
    doThis();
});

function doThis() {
    var wordCounts = {};
    var matches = this.value.match(/\b/g);
    wordCounts[this.id] = matches ? matches.length / 2 : 0;
    var finalCount = 0;
    $.each(wordCounts, function(k, v) {
        finalCount += v;
    });
    $('span#word-count').text(finalCount);
}

jsFiddle： http://jsfiddle.net/YJVPZ/265/

现在doThis()甚至不起作用。如果我要用doThis()包装input.bind('keyup', function() { ... }的内容，它将正常工作。我知道这是因为它使用的是未定义的this。如何将变量input作为参数传递？

有没有办法一起使用.bind和.on来调用相同的函数，而不是像现在这样调用两个独立的实例？

Answer 1

input.bind('keyup input', doThis);

Fiddle

通过将函数传递给.bind / .on，jQuery会自动将处理程序内的this引用设置为触发所述事件处理程序的元素（在本例中为#test }）。

要手动设置this引用，在这种情况下不需要，您可以使用Function.call / Function.apply：

input.bind('keyup input', function() {
    //in this scope, `this` points to `#test`
    doThis.apply(this, arguments); //sets `this` inside of this `doThis` call to
                                   //the same `this` of the current scope.
});

我们应用arguments，以便doThis也会收到传递给事件处理程序的Event object。在这个特定用例中没有必要，但在代理需要访问传递给原始处理程序的参数的事件处理程序时很有用。

旁注：为了使代码正常工作，您应将其移至body的末尾或将代码包装在DOM ready handler内，即将其放在{{1}内}}

Answer 2

试试这个 -

input.on('input keyup', doThis);

在jQuery中将变量作为参数传递

2 个答案: