全局 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 之前，您可以使用原型和闭包来破解支持。有关示例实现，请参阅此答案的底部。

document.body.scrollLeft

如果您处于 IE Quirks 模式，则只有 document.body。你不想处于怪癖模式。对于标准模式文档类型，它是 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); });