javascript面向对象编程中的事件处理

      早已习惯了面向对象编程的思维，喜欢面向对象带来的许多好处，尤其是大大增加了代码的可重用性，即使是使用javascript这种面向对象特性并不明显的语言时，也希望能将功能划分到一个一个的对象中，特别是设计动态地页面控件时，面向对象编程使生成的控件使用起来非常的简洁。

      但是javascript毕竟不是真正的面向对象语言，在给控件添加事件响应函数时的一个个函数指针往往使得程序的结构变得支离破碎，任何有追求的人应该都无法忍受这种混乱的代码的存在。

      最近一年的工作中使用了大部分的javascript，对这种问题我尝试了许多种解决方案，目前终于形成了一套比较满意的思路。

比如编写一个简单模型的拖放，这里假设这个模型就是一个DIV function Shape(parentNode,x,y,color) { this.node=document.createElement("div"); this.node.style.position="absolute"; this.node.style.left=x+"px"; this.node.style.top=y+"px"; this.node.style.backgroundColor=color; var self=this; this.dragEventHandler=function(event) { self.dragShape(event); } if(this.node.attachEvent) this.node.attachEvent("onmousedown",this.dragEventHandler); else this.node.addEventListener("mousedown",this.dragEventHandler,false); } Shape.prototype.dragShape=function(e) { if(e.type=="mousedown") { this.fx=e.clientX; this.fy=e.clientY; this.origLeft=parseInt(this.node.style.left); this.origTop=parseInt(this.node.style.Top); document.body.setCapture(); if(document.body.attachEvent) { document.body.attachEvent("onmousemove",this.dragEventHandler); document.body.attachEvent("onmouseup",this.dragEventHandler); } else { document.body.addEventListener("mousemove",this.dragEventHandler,false); document.body.addEventListener("mouseup",this.dragEventHandler,false); } } else if(e.type=="mousemove") { var dx=e.clientX-this.fx,dy=e.clientY-this.fy; this.node.style.left=(this.origLeft+dx)+"px"; this.node.style.top=(this.origTop+dy)+"py"; } else { if(document.body.detachEvent) { document.body.detachEvent("onmousemove",this.dragEventHandler); document.body.detachEvent("onmouseup",this.dragEventHandler); } else { document.body.removeEventListener("mousemove",this.dragEventHandler,false); document.body.removeEventListener("mouseup",this.dragEventHandler,false); } document.body.releaseCapture(); } }

      这是一个比较完善的拖放实现，模型监听mousedown事件，事件触发后为body节点添加mousemove和mouseup事件，并将事件的触发集中于body节点，使拖放能够流畅无限制，mouseup事件触发后监听状态还原至mousedown事件触发以前。这段代码的真正重点在于事件的处理函数将对象的类方法简单的封装起来，使事件处理函数能够方便的访问对象的属性和方法，基本看不出结构化程序设计的痕迹。