为什么jQuery会立即执行传递给.click()的函数？

Question

我对以下代码感到困惑:

代码#1

$("#btn1").click(alert("hello"));

代码#2

$("#btn1").click(function() {
    alert("Btn 1 Clicked");
});

使用代码#1,alert无需单击按钮即可运行功能.为什么在alert没有click触发事件的情况下调用该函数？我认为click只有当用户点击按钮时才会运行一个函数,然后该alert函数将被运行.请指正.

有人可以向我解释为什么这些代码示例表现不同？

Answer 1

例1

$("#btn1").click(alert("hello"));

这会alert()立即评估函数,然后将结果传递给click函数.作为alert的返回值undefined,jQuery代码什么都不做(因为jQuery只是检查第一个参数类型来确定要做什么).

此测试显示它不会触发事件:https://jsfiddle.net/TrueBlueAussie/qvut0jom/1/

除非您提供函数引用,否则将立即计算任何函数调用,并且返回的值将有效替换函数调用.

例如,使用a(b(c())),c()首先调用,然后b()使用返回值调用c().a()然后使用返回值调用b().

在您的示例中,alert()立即进行评估(使其弹出).它会undefined在您关闭它时返回一个值.这undefined则值传递给.click().这与调用相同.click(undefined),在jQuery中什么都不做.

这个方便的参考显示了在Javascript中处理不同操作的顺序:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

注意:在调用函数(稍后)之前,不会对函数的引用进行求值.

例2

$("#btn1").click(function() {
    alert("Btn 1 Clicked");
});

这会传递对匿名函数的引用,该函数在发生单击事件时被调用.这个函数调用click很简单,注册了对函数的引用,以后再调用.

您还可以alert通过引用传递非匿名函数,稍后将调用它:

$("#btn1").click(alert);

这将调用alert,如您在示例1中所预期的那样,但显然无法以此格式传递参数.