javascript - 将 $(this) 传递给绑定(bind)回调函数

Question

我试图理解这两种回调方法之间的区别以及它们如何处理 $(this) 上下文。

工作示例

$("#container").on("click",".button", function() {
    $(this).text("foo");
});

这个过程运行得很好。但是，如果我想采取不同的方法，我就会失去事件的上下文。

非工作示例

bindAnEventToAnElement: function(theElement, theEvent, theFunctions) {
    $("body").on(theEvent, theElement, function() {
        theFunctions();
    });
}

bindAnEventToAnElement(".button", "click", function() { 
    $(this).text("foo"); 
});

后者会产生未定义的错误。有没有办法可以在保留事件上下文的同时处理这样的回调？

fiddle http://jsfiddle.net/szrjt6ta/

Answer 1

据我所知，回调函数中jquery的this指的是event.currentTarget值。因此，您还应该传递事件对象并执行如下操作:

 $("#container").on("click", ".button", function () {
     $(this).text("foo");
 });

 theApp = {
     bindAnEventToAnElement: function (theElement, theEvent, theFunctions) {
         $("body").on(theEvent, theElement, function (e) {
             theFunctions.apply(this /* or e.currentTarget */, arguments);
         });
     }
 }

 theApp.bindAnEventToAnElement(".button-two", "click", function () {
     $(this).text("foo");
 });

<强> Working Fiddle

如果我尝试解释这个问题，jquery 正在绑定(bind)回调函数以将其作为 e.currentTarget 传递。但是您在该回调函数内传递了另一个回调函数，其范围不是其父回调函数，而是窗口。因此，您需要再次将 this 绑定(bind)到包装的函数，您可以使用 apply 来完成此操作。或call .