javascript - 全局 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 之前，您可以使用原型(prototype)和闭包自行破解支持。见this answer底部示例实现。

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};