将其他参数传递给事件处理程序

Pass additional arguments to event handler?

本文关键字：事件处理 程序 参数传递 其他      更新时间：2023-09-26

我在一个对象中定义了我的函数，如下所示：

_clickHandler: function(event){
  event.preventDefault();
},
attachClickEv: function(element){
  ......
  element.on('click', this._clickHandler);
},

问题是我似乎无法通过"；这个"；到clickHandler功能

我知道我可以把它封装在另一个函数中，比如：

var tthis = this;
element.on('click', function(event){
  tthis._clickHandler(event, tthis);
});

但是之后我不能用解除该功能

element.off('click', this._clickHandler);

还有别的办法吗？

您可以为此使用绑定。这里有一个例子：

element.on('click', this._clickHandler.bind(this));
//later in the code...
_clickHandler: function(event) {
}

由于您使用的是jQuery，所以您也可以使用jQuery.proxy()。更多信息：http://api.jquery.com/jQuery.proxy

更新：

要访问回调中的元素，您必须使用event.target或event.currentTarget，或者执行以下操作（取决于您正在执行的操作）：

element.on('click', this._clickHandler.bind(this, element));
//later in the code...
_clickHandler: function(element, event) {
}

另一种方法是将元素设置为对象的属性，如：this.element = $('#el')，然后在回调中使用它。

现场示例：http://jsbin.com/mezuberucu/1/edit?html，js，输出

_clickHandler: function(x, y, event){
  // x = 1, y = 2
  event.preventDefault();
},
attachClickEv: function(element){
  element.on('click', this._clickHandler.bind(1,2));
},

正如.on文档中所说，您可以将数据传递给您的事件。

.on（事件[，选择器][，数据]，处理程序）

数据

类型：任何东西

触发事件时要在event.Data中传递给处理程序的数据。

所以你的活动可能是这样的：

_clickHandler: function(event){
  var myObj = event.data.object;
  // [myObj] will be your plugin
  // [this] will be the clicked element
  // [event] will be you event
},
attachClickEv: function(element){
  ......
  element.on('click', {object : this}, this._clickHandler);
},

假设您使用的是受支持的浏览器（ES5），则可以使用bind，即：

  element.on('click', this._clickHandler.bind(this);
相关文章：