Question

考虑此代码：

$("#divToBeClicked").on('click', function(e){
    // large pile of code
});

＆＃39;＆＃39;参数由on（）方法传递。我需要将此函数内的代码拆分为不同的函数，因为它太大了。现在，这可以正常工作：

$("#divToBeClicked").on('click', function(e){
    otherFunction(e, param2, param3);
});

但是我很好奇，我想知道如何以下列方式做到这一点：

$("#divToBeClicked").on('click', otherFunction(e, pararm2, param3));

如果可能的话，我该如何做到这一点？如果我这样尝试，e在otherFunction（）中是未定义的。请注意，我将额外的参数传递给此函数。

Answer 1

您可以将其作为事件对象上可用的数据传递

function myfunc(e) {
    console.log(e.data);
}

$("button").on("click", {"a" : "apple", "b" : "box"}, myfunc);

或使用闭包

function myfunc(e,a,b) {
    console.log(a);
}

var x = "apple", y = "box";
$("button").on("click", function(e){ myfunc.call(this, e, x, y) });

您也可以绑定/ jQuery.proxy，但是丢失了“this”指向被点击的内容。

Answer 2

如果你想用你的函数替换匿名函数，你只需省略() - 但你的函数必须采用与匿名函数相同的参数（event，不确定param1 }和param2是）：

$("#divToBeClicked").on('click', otherFunction);

otherFunction：

function otherFunction(e) {
    console.log(e); //theres e
}

如果你想要额外的参数，你需要匿名函数：

$("#divToBeClicked").on('click', function(e){
    otherFunction(e, param2, param3);
});

修改：已更正，您可以使用.bind

Answer 3

您可以使用Function.bind()之类的

$("#divToBeClicked").on('click', otherFunction.bind(undefined, pararm2, param3));

注意：处理程序内的this将不再引用单击的元素，也仅支持IE9 +

Answer 4

这似乎是bound functions的一个很好的用例。

唯一的问题是您需要切换otherFunction的参数顺序，以便事件是 last 。

$("#divToBeClicked").on('click', otherFunction.bind(window, pararm2, param3));

在此代码段中，我将otherFunction的上下文绑定到window（默认值）。然后，我为它指定默认的前两个参数。

请注意，this的上下文（otherFunction）不会成为调用处理程序的元素;但是由于你原来的匿名函数解决方案无论如何都失去了它，它似乎不是一个问题。