javascript - jQuery 事件处理程序闭包与上下文

Question

就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放， visit the help center以获得指导。

已关闭 10 年前。

查看以下 jQuery 代码:

$button.on("click", {context: "externalRef1"}, function(e){ if (e.data.context){...}  });

我想知道什么时候应该将数据作为上下文传递到处理程序中(按照上面的示例)以及为什么我不能总是依赖闭包(不要介意冲突的名称 - 这实际上不是问题)？

一些说明 - 闭包是关于允许代码使用外部变量，即

var foo = function(){

    var externalRef = "a1";

    var call = function(){}{
       alert(externalRef); // a1
    }    
};

如果情况总是如此，为什么您需要按照上面指出的方式传递数据？

Answer 1

实际上，这是一个品味问题。对我来说，闭包是一种更明确、更“自然”的数据传递方式。然而，在某些情况下，event.data 更方便，例如在循环中:

// doesn't do what you want!
for(var i = 0; i < 5; i++)
    $("#button" + i).on("click", function(e) { alert("Button " + i + " clicked") });

// works just fine
for(var i = 0; i < 4; i++)
    $("#button" + i).on("click", {i: i}, function(e) { alert("Button " + e.data.i + " clicked") });

另一个用例是单个函数充当多个对象的事件处理程序:

$("#add_button").on("click", {action: "+"}, calculatorButtonClicked);
$("#mul_button").on("click", {action: "*"}, calculatorButtonClicked);
$("#div_button").on("click", {action: "/"}, calculatorButtonClicked);

function calculatorButtonClicked(e) {

    ...lots of common code

    switch(e.data.action) {
        case '+': result = x + y;
        case '*': result = x * y;
            etc
    }

    ...lots of common code

}