如何将事件处理程序绑定到 jQuery 中的实例？

Posted 2023-05-08

【中文标题】如何将事件处理程序绑定到 jQuery 中的实例？

【英文标题】：How can I bind an event handler to an instance in jQuery?

【发布时间】：2010-09-12 03:42:29

【问题描述】：

我正在尝试使用 jQuery 将事件绑定到 javascript“类”的特定实例的“方法”。要求是我在事件处理程序中应该能够使用“this”关键字来引用我最初将事件绑定到的实例。

更详细地说，假设我有一个“类”，如下所示：

function Car(owner) 
  this.owner = owner;

Car.prototype = 
  drive: function() 
    alert("Driving "+this.owner+"s car!");
  

还有一个实例：

var myCar = new Car("Bob");

我现在想将一个事件绑定到我的汽车的驱动器“方法”，这样每当我点击一个按钮时，驱动器“方法”就会在汽车“类”的 myCar 实例上被调用。

到目前为止，我一直在使用以下函数来创建一个闭包，它允许我在“方法”中使用“this”关键字轻松访问实例成员。

function createHandler( obj, method ) 
  return function( event ) 
    return obj[method](event||window.event);
  

我是这样使用的：

document.getElementById("myButton")
  .addEventListener("click", createHandler(myCar,"drive"));

我如何用 JQuery 完成这样的事情？

我特别询问将“this”与指定的实例相关联，我可以自己处理周围的其他杂物。

【问题讨论】：

看看这个：***.com/questions/4289045/…

【参考方案1】：

只需使用匿名函数：

$("#myButton").click(function()  myCar.drive(); );

【讨论】：

这仅适用于一个实例。如果有多个 Car 实例，它将不起作用。

【参考方案2】：

试试这个：

$("#myButton").each(function() 

var $btn = $(this);

    $btn.on('click',function()

     // Do whatever you want.

    );
);

在这里，您首先创建一个循环来定位所有#myButton 元素（在您的示例中这是错误的，您应该改用 Class），例如：

$(".myButton").each(...

然后我们将点击事件处理程序附加到所有这些。