单击元素时如何执行外部函数？

Question

我试图在点击DOM元素时执行外部函数，而不将其包装在另一个函数中。

假设我有一个名为sayHello()的函数，如下所示：

function sayHello(){
  alert("hello");
};

要在点击时执行它，我目前必须这样做：

$("#myelement").click(function(){
  sayHello();
});

注意我被迫将单个函数调用包装在另一个函数中。 我想要做的就是这样

$("#myelement").click(sayHello());

除此之外根本不起作用。 我可以避免以任何方式将单个函数调用包装在另一个函数中吗？ 谢谢！

。

附加信息：当我需要将参数传递给函数时，我将如何实现相同的功能？

..

附加信息：像Chris Brandsma和Jani Hartikainen所指出的那样，应该能够使用bind函数将参数传递给函数而不将其包装在另一个匿名函数中：

$("#myelement").bind("click", "john", sayHello);

sayHello()现在接受一个新参数，如下：

function sayHello(name){
  alert("Hello, "+name);
}

不幸的是，这似乎不起作用......任何想法？ 事件/绑定文档位于此处谢谢！

Answer 1

从你在那里的问题中挑选。

显然，你需要以这种方式调用它：

$("#myelement").click(sayHello);

以它的方式调用它实际上执行方法而不是将方法发送到单击处理程序。

如果您需要传递数据，您也可以这样调用方法：

$("#myelement").click(function(){ sayHello("tom");});

或者您可以通过bind()函数传递数据

function sayHello(event){ alert("Hello, "+event.data); }

$("#myelement").bind("click", "tom", sayHello);

或者，您可以从单击的元素中检索数据

$("#myelement").click(function(){sayHello($(this).attr("hasData");});.

希望有所帮助。

Answer 2

您正在调用sayHello函数，您可以通过删除括号来引用它：

$("#myelement").click(sayHello);

编辑：如果需要将参数传递给sayHello函数，则需要将其包装在另一个函数中。 这定义了一个无参数的新函数，它使用创建时提供的参数调用函数：

$("#myelement").click(function () {
   sayHello('name');
   // Creates an anonymous function that is called when #myelement is clicked.
   // The anonymous function invokes the sayHello-function
});

Answer 3

$（ “＃myelement”）点击（的sayHello（））;

这实际上是在设置click处理程序之前调用sayHello() 。 它试图将sayHello()的返回值设置为回调函数！

相反，尝试：

$("#myelement").click(sayHello);

关于你的编辑，如果你需要传递参数，你可以使用你已经使用的闭包技术，但如果你正在寻找更清洁的东西，那么看看如何通过参数传递对函数的引用？

Answer 4

点击时你会传递什么参数？ 如果你事先知道它们是什么，你可以在用户点击之前设置它们。

你不能传递参数，但你可以通过简单地将成员添加到触发事件的对象来伪造参数，所以..

myObject.onClick = sayHello;
myObject.param1 = "foo";

然后，当你打电话给这个

function sayHello(){
  alert(this.param1);
}

Answer 5

现在不推荐使用bind()方法。

从jQuery 3.0开始， .bind()已被弃用。 它被.on()方法取代，因为自jQuery 1.7以来将事件处理程序附加到文档，因此不鼓励使用它。

最好使用on()方法进行所有事件绑定以保持一致性。 您可以将参数作为事件名称后面的第二个参数传递给处理程序。

function sayHello(name){
    console.log('Hello ' + name);
};

$('#myelement').on('click', 'John', sayHello);

Answer 6

是的，而不是传递sayHello（），只需传递函数名称。

$("#myelement").click(sayHello);