这是使用 jQuery 在 JavaScript 中正确绑定(bind)和事件到对象方法的方法吗?
我已经设置了一些示例代码,但我关心的部分是注释“这样可以吗?”后面的两行
当然,由于回调是对象的方法,因此我需要上下文保持不变。
function MyPrototype(id) {
this.id = id;
this.sel = '#' + id;
// *** IS THIS OK? ***
$(this.sel).on('click', function(evt) {
MyPrototype.prototype.mouseClick.call(this, evt); });
}
MyPrototype.prototype.mouseClick = function (evt) {
// I want to use evt to get info about the event
// I want use this to access properties and methods of the instance
alert(this.id + ' was clicked');
}
myObject1 = new MyPrototype('myDiv1');
myObject2 = new MyPrototype('myDiv2');
此外,我可能会意识到有必要将事件与特定函数解除绑定(bind)。
但是以下内容不起作用...
MyPrototype.prototype.unbindClick = function() {
$(this.sel).off('click', function(evt) {
MyPrototype.prototype.mouseClick.call(this, evt); });
}
myObject2.unbindClick();
请注意,我传递了一个内联函数作为事件处理程序。
最佳答案
尝试jQuery.proxy :
function MyPrototype(id) {
this.id = id;
this.sel = '#' + id;
// using jQuery.proxy:
$(this.sel).on('click', $.proxy(this.mouseClick, this));
// or Function.bind:
// $(this.sel).on('click', this.mouseClick.bind(this));
// or writing it out:
/*
var self = this;
$(this.sel).on('click', function () {
return self.mouseClick.apply(self, arguments);
});
*/
}
MyPrototype.prototype.mouseClick = function(evt) {
// I want to use evt to get info about the event
// I want use this to access properties and methods of the instance
console.log(this.id + ' was clicked');
};
var myObject1 = new MyPrototype('myDiv1');
var myObject2 = new MyPrototype('myDiv2');
<小时/>
关于问题的更新:
如果您想取消绑定(bind)单个事件处理程序,则需要与绑定(bind)时使用的处理程序函数完全相同。否则整个事件就失去约束力。您添加到问题中的解决方案和 $.proxy
都无济于事。不过,有一些解决方案:
- 保留对绑定(bind)处理程序的引用并在解除绑定(bind)时使用该引用
- 使用jQuery's Namespaced Events
关于jquery - 将对象的方法绑定(bind)到事件的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14335696/