全局Javascript事件处理对象上下文

Question

Javascript中的事件处理程序中有以下问题。我有一个有这样的mousemove事件处理程序的对象。

function MyObject(){ } 
function MyObject.prototype = { 

    currentMousePosition: null, 
    onMouseMove: function(ev){ 
     this.currentMousePosition = this.getCoordinates(ev); 
    }, 
    getCoordinates: function(ev){ 
     if (ev.pageX || ev.pageY) 
      return { x: ev.pageX, y: ev.pageY }; 

     return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }; 
    } 

}; 

我试图解决的问题解决了周围的对象上下文。在我的onMouseMove函数中，它分配currentMousePosition属性。当然，这是行不通的，因为它是一个处理mousemove事件的静态函数。

我在找什么是一种技术/方法来传递一个对象上下文与我的事件处理程序。我能想到的最好的例子是Google Maps API函数GEvent.bind（） 使用它可以将对象与想要在指定事件上触发的函数一起传递。我基本上是在寻找同样的事情。

Answer 1

今天，很多人都这样做有一个明确的关闭：

var myobject= new MyObject(); 
element.onmousemove= function() { 
    myobject.onMouseMove(); 
}; 

但在未来，你会与ECMAScript第五版方法function.bind做到这一点：

element.onmousemove= myobject.onMouseMove.bind(myobject); 

（任何进一步的当被调用时，传递给function.bind的参数被添加到目标函数的参数列表中。）

直到浏览器全部支持function.bind n反之，你可以使用原型和闭包来破解自己的支持。有关示例实现，请参阅this answer的底部。

document.body.scrollLeft 

这只是document.body如果你是在IE怪癖模式。你不想成为怪癖模式。使用标准模式文档类型，它改为document.documentElement。所以，如果你需要支持可能使用模式的任何不同的页面，或者你仍然需要支持IE5出于某种原因（但愿不是）：

var viewport= document.compatMode==='CSS1Compat'? document.documentElement : document.body; 
return {x: ev.clientX+viewport.scrollLeft, y: ev.clientY+viewport.scrollTop}; 

Answer 2

您需要通过调用处理程序的包装功能在正确的上下文中。

例如：

addHandler(function(ev) { someObject.onMouseMove(ev); });