jQuery onClick 多个回调函数

Question

我如何为jQuery事件注册多个回调函数?下面是一个希望实现的例子:

$(document).on("click", ".someclass", CallbackFunction1, CallbackFunction2);

function CallbackFunction1(event) {
    //Do stuff
}

function CallbackFunction2(event) {
    //Do some other stuff
}

如何设置事件处理程序以在单击元素时执行两个回调函数？

- nagyben

Answer 1

你可以将它们作为单独的事件处理程序附加：

$(document).on("click", ".someclass", CallbackFunction1)
           .on("click", ".someclass", CallbackFunction2);

- Vatev

---

已经完成了。非常感谢！ - nagyben

我正在尝试这个，但是我发现如果我注册了大约40个回调函数，性能会严重下降（函数需要长达10秒才能开始执行）。 - Zach Smith

我刚刚尝试通过控制台在此页面上向document.body添加了许多点击监听器，并没有看到任何明显的减速。这可能是由于您的设置中有特定的原因导致的。 - Vatev

Answer 2

除非我误解了你的问题，否则你可以使用一个单一的事件处理程序：

$(document).on('click', '.someclass', function(e){
    CallbackFunction1(e);
    CallbackFunction2(e);
});

- ajm

---

该实现缺少一些东西。它没有设置函数的 this 值，也没有处理返回值，也没有检查在调用之间是否停止了立即传播。 - cookie monster

@cookiemonster：获取this并允许返回值的一种方法（无论如何，您在单击事件处理程序上不会真正使用它）是：CallbackFunction1.apply(this,[e]); CallbackFunction2.apply(this,[e])。即使只需要一个回调，我经常使用这种方法。它使我的回调不过度依赖生成它们的事件类型。 - dgo

Answer 3

你可以使用第三个函数，然后再调用其他函数：

$(document).on("click", ".someclass", CallbackFunction);

function CallbackFunction(event) {
    CallbackFunction1(event);
    CallbackFunction2(event);
}

function CallbackFunction1(event) {
    //Do stuff
}

function CallbackFunction2(event) {
    //Do some other stuff
}

- Brutus

---

我们甚至可以更深入地称之为“函数内嵌”！;-) - DoXicK

是的，我知道。不过我也没有投反对票。我只是给Vatev的答案点了赞，因为在这种情况下那是最优雅（且正确）的解决方案 :-) - DoXicK

当然，我完全同意你的观点，只是试图为我的答案辩护！无论如何，我真的很欣赏“func-ception”这个术语，我会永远记住它！！！ :D 对你的尊重++！ :D - Brutus

不知道为什么你被踩了，因为这个也可以运行。 - nagyben

@exantas 这个被踩的原因是因为这是一个不好的做法，正如可以在AJM的回复评论中看到的那样 :-) 用头把钉子钉进墙里不会让它成为锤子...只会让你非常疼痛。但是它确实有效！ - DoXicK

Answer 4

如果您要重复使用它来绑定不同元素的不同处理程序列表，我会创建一个工厂。

function multiFunction(){
    var methods = Array.prototype.slice.call(arguments, 0);
    return function(e){
        for (var f=0, l = methods.length; f<l; f++) {
            methods[f].apply(this, arguments);
        }
    }
}

并像这样调用它

$(document)
    .on('click', 'someclass', multiFunction( CallbackFunction1, CallbackFunction2));
    .on('click', 'someotherclass', multiFunction( CallbackFunction8, CallbackFunction1, CallbackFunction5));

演示请访问http://jsfiddle.net/gaby/D8K75/

- Gabriele Petrioli

---

@cookiemonster 对的..在使用那个解决方案之前还在测试其他东西，然后就一直沿用了那个方案..同时把 call 改成了 apply ，这样它就可以传递事件支持的所有参数。 - Gabriele Petrioli