Question

我一直在探索为事件处理程序使用自定义函数。在这个精简的示例中，我试图在用户单击按钮时弹出警报。

但是当页面加载时，警报框会立即弹出！我究竟做错了什么？（评论部分完全相同）。

如果我将bclick（）函数定义为

function bclick(foo, bar){ ... }

结果也一样。

标题中的

JS：

<script type="text/javascript">

var bclick = function(foo, bar){alert( foo + "  " + bar + "\n");}

//$(document).ready(function(){
//    $("button").click(bclick("Button","Clicked"));
//    });

$("button").click(bclick("Button","Clicked"));

</script>

正文中的相关HTML：

<button>Click Me!</button>

Answer 1

在你传递它之前，你正在评估你的功能。

$("button").click(bclick("Button","Clicked"));

此处，使用这些参数调用bclick，并将结果传递给click方法。你想像普通变量一样传递它，如下所示：

$("button").click(bclick);

但是，显而易见的问题是你无法传递自定义参数。

你也可以传入一个调用你的函数的匿名函数：

$("button").click(function() { bclick("Button", "Clicked"); });

Answer 2

正如musicfreak所说。但是，如果您想要变得非常棘手并使用您拥有的代码，那么您只需要在bclick函数的末尾添加return this。

Answer 3

如果要在设置事件处理程序时传递参数，另一种方法是返回一个函数。

$("button").click(bclick("Button","Clicked"));

function bclick(foo, bar) { // called once when the event handler is setup
    return function(e) { // called every time the event is triggered
        // you still have the original `foo` and `bar` in scope,
        // and a new `e` (event object) every time the button is clicked
        console.log(foo, bar, e);
    };
}

使用单击事件处理程序时，为什么要执行非匿名函数？

3 个答案: