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

Pass additional arguments to event handler?

我在这样的对象中定义了我的函数:

_clickHandler: function(event){
  event.preventDefault();

},

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

问题是我似乎无法将 "this" 传递给 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.targetevent.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,output

假设您使用的是受支持的浏览器 (ES5),您可以使用 bind 即:

  element.on('click', this._clickHandler.bind(this);

.on 的文档所述,您可以将数据传递给您的事件。

.on( events [, selector ] [, data ], handler )

data

Type: Anything

Data to be passed to the handler in event.data when an event is triggered.

所以您的活动可以是这样的:

_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);
},
_clickHandler: function(x, y, event){
  // x = 1, y = 2
  event.preventDefault();
},

attachClickEv: function(element){
  element.on('click', this._clickHandler.bind(1,2));
},