为什么面向对象中addEventListener找不到属性或者无法移除事件？

Question

以下两短代码都表示一个简单功能，描述为：我想要的效果是，鼠标按下后，在页面移动不断计数，鼠标抬起则移除事件。但是下面的代码都有问题。第一段代码的问题，找不到removeEventListener属性：functioncounter(obj){this.obj=obj;this.num=0;}counter.prototype.start=function(){varself=this;self.obj.addEventListener("mousemove",self.move,false);self.obj.addEventListener("mouseup",self.end,false);}counter.prototype.move=function(){varself=this;document.title=self.num++;}counter.prototype.end=function(){varself=this;self.obj.removeEventListener("mousemove",self.move,false);self.obj.removeEventListener("mouseup",self.end,false);}counter.prototype.init=function(){varself=this;self.obj.addEventListener("mousedown",self.start,false);}varcounterNew=newcounter(document);counterNew.init();以上代码在init中有修改，原来是self.end，搞错了，应该是self.start第二段代码的问题，可能是因为绑定和删除都是匿名函数，所以无法移除事件：functioncounter(obj){this.obj=obj;this.num=0;}counter.prototype.start=function(){varself=this;self.obj.addEventListener("mousemove",function(){self.move();},false);self.obj.addEventListener("mouseup",function(){self.end();},false);}counter.prototype.move=function(){varself=this;document.title=self.num++;}counter.prototype.end=function(){varself=this;self.obj.removeEventListener("mousemove",function(){self.move();},false);self.obj.removeEventListener("mouseup",function(){self.end();},false);}counter.prototype.init=function(){varself=this;self.obj.addEventListener("mousedown",function(){self.start();},false);}varcounterNew=newcounter(document);counterNew.init();请问大家，有解决方案吗？多谢了

Answer 1

非面向对象实现
//非面向对象实现
varnum1=0;
functionstart(){
num1++;
document.title=num1;
}
document.addEventListener("mousedown",function(){
this.addEventListener("mousemove",start,false);
},false);
document.addEventListener("mouseup",function(){
this.removeEventListener("mousemove",start,false);
});
面向对象实现
functionCounter(obj){
this.num=0;
this.obj=obj;
}
Counter.prototype.countNum=function(){
that.num++;
this.title=that.num;
}
Counter.prototype.mdStart=function(){
this.addEventListener("mousemove",that.countNum,false);
}
Counter.prototype.mdEnd=function(){
this.removeEventListener("mousemove",that.countNum,false);
}
Counter.prototype.start=function(){
that=this;
this.obj.addEventListener("mousedown",that.mdStart,false);
this.obj.addEventListener("mouseup",that.mdEnd,false);
}
Counter.prototype.end=function(){
this.addEventListener("mouseup",this.mdEnd,false);
}
Counter.prototype.init=function(){
this.start();
}
varcounterNew=newCounter(document);
counterNew.init();
第二种也可以通过call或者apply实现，TZ可以试试
                            

Answer 2

第一段代码解决方案：
counter.prototype.init=function(){
varself=this;
self.obj.addEventListener("mousedown",function(){
self.end();
},false);
}
原因：self.obj.addEventListener("mousedown",self.end,false);，self.end函数中的this指向了document。