为什么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/

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

例如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中所预期的那样，但显然无法以此格式传递参数。

Answer 2

第一个是触发器，第二个是监听器。为避免这种模棱两可的行为，请使用on()和trigger()，您不会再犯错：

监听器：

 $('#btn1').on('click', function() {
        // do something when user clicks on btn1
 });

与

相同

 $('#btn1').click(function() {
        // do something when user clicks on btn1
 });

触发：

 $('#btn1').trigger('click'); // makes a click in btn1 without user intervention

与

相同

 $('#btn1').click();