Javascript 如何在jQuery中将参数传递给事件处理程序？

jQuery代码如下：

$("#myid").click(myfunction);

function myfunction(arg1, arg2) {/* something */}

---

如何在使用jQuery时将参数传递给

myfunction

？

最简单的方法就是这样做（假设您不想将任何事件信息传递给函数）

这将创建一个匿名函数，该函数在触发

click

事件时调用。这将依次使用您提供的参数调用

myfunction（）

如果要保留（调用函数时

this

的值，请设置为触发事件的元素），然后使用调用函数

您不能以示例所述的方式直接传递引用，否则它的单个参数将是相同的

如果确实希望传递引用，则必须利用jQuery的函数（这是一个跨浏览器的函数包装器）。这允许您传递参数，这些参数在

事件

参数之前绑定

$("#myid").click($.proxy(myfunction, null, arg1, arg2));   

在本例中，

myfunction（）

将在其

ThisBinding

完好无损的情况下执行（

null

不是对象，因此使用触发事件的元素的正常

this

值），以及参数（按顺序）

arg1

，

arg2

最后是jQuery

事件

对象，如果不需要它，您可以忽略它（甚至不要在函数的参数中命名它）

---

您也可以使用jQuery

事件

对象传递数据，但这需要修改

myfunction（）

以通过

event.data.arg1

访问它（与您的问题中提到的函数参数不同），或者至少引入一个手动代理函数，如前一个示例或使用后一个示例生成的代理函数。

虽然您当然应该使用Alex的答案，但原型库的“绑定”方法已在Ecmascript 5中标准化，并将很快在浏览器中本机实现。它的工作原理如下：

jQuery("#myid").click(myfunction.bind(this, arg1, arg2));

还允许您使用on和off方法绑定和解除绑定特定事件处理程序

例如：

$("#myid").off('click', myfunction);

---

这将从#myid

旧线程中解除myfunction处理程序的绑定，但出于搜索目的；尝试：

$(selector).on('mouseover',...);

。。。并检查“数据”参数：

e、 g:

---

简单：

$(element).on("click", ["Jesikka"],  myHandler);

function myHandler(event){
   alert(event.data);     //passed in "event.data"
}

---

已经有了很好的答案，但不管怎样，这是我的两分钱。您还可以使用：

$（“#myid”）。单击（{arg1:“foo”，arg2:“bar”}，myfunction）

听众会像这样：

函数myfunction（事件）{
警报（event.data.arg1）；
警报（event.data.arg2）；
}

请记住，您将在myfunction（）中丢失jquery上下文$（this）。要进行维护，请从匿名处理程序调用

myfunction（this，arg1，arg2）

。然后，您的函数可以执行

myfunction（el，arg1，arg2）{alert（$（el）.val（））；}

@geoseve:如果您想保留它，请使用

myfunction.call（this，arg1，arg2）

。这并不是像问题所问的那样向函数传递参数。它调用的是一个调用另一个函数的函数。在匿名函数中嵌套函数不是一个好主意，因为您无法轻松解除匿名函数的绑定。@geo1701如果您使用自定义名称空间，并且只绑定一次，则可以解除匿名函数的绑定。在大多数情况下，这没关系。但您确实失去了您提到的好处。同意@geo1701，我不得不删除事件处理程序，他的解决方案是唯一有效的。如果您使用此方法，例如，

bind（）

在该上下文（全局）中将其设置为

this

，是否将

设置为不同的上下文可能导致单击处理程序将
窗口
对象设置为
this
，而不是引用
#myid
元素？@alex你说得很对。jQuery将把#myid元素绑定到其事件处理程序中的“this”，使用bind方法将覆盖该元素。几年前我写了这篇文章，似乎很难说出我当时的想法。我猜我只是假设阅读我答案的人足够聪明，能够自己弄清楚这些细节。这是一个非常危险的假设。@Travis在撰写本文时（在Breton的答案发表后将近11年），caniuse.com报告说，98.87%的浏览器支持Ecmascript 5。（请参阅）@Stephan My Take-in-Chake评论的目标是@Breton，因为他假设阅读我答案的人足够聪明，能够自己解决这些细节问题，而不是Ecmascript。正如问题所问，这不是向函数传递参数。这就是传递参数的方式（将参数封装在对象中）。这是传递数据的方式，但是调用函数参数是一种延伸。对于公认的答案，这是一个更好的解决方案，因为它使用了推荐的模式，即使用On/Off方法绑定和解除绑定侦听器。如果您认为解除绑定非常罕见，那么您的经验一定非常有限。请不要对别人的贡献嗤之以鼻——这是一个集体知识库，而不是竞争。没有正确或错误的答案。可能是重复的
$("#myid").off('click', myfunction);

$(selector).on('mouseover',...);

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {name: "Karl"}, greet );
$( "button" ).on( "click", {name: "Addy"}, greet );

$(element).on("click", ["Jesikka"],  myHandler);

function myHandler(event){
   alert(event.data);     //passed in "event.data"
}