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

【问题标题】：Global Javascript Event Handling Object Context全局 Javascript 事件处理对象上下文
【发布时间】：2010-02-11 02:43:56
【问题描述】：

我在 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()。有了它，您可以传递要在指定事件上触发的函数的对象。我基本上在寻找同样的东西。

【问题讨论】：

标签： javascript oop dom-events objectcontext

【解决方案1】：

今天，许多人使用显式闭包来做到这一点：

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

但在未来，您将使用 ECMAScript 第五版方法function.bind：

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

（传递给function.bind 的任何其他参数在调用时都会添加到目标函数的参数列表中。）

在浏览器都原生支持 function.bind 之前，您可以使用原型和闭包来破解自己的支持。示例实现见底部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};

【讨论】：

【解决方案2】：

您需要传递一个包装函数，在正确的上下文中调用您的处理程序。

例如：

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

【讨论】：