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之前，您可以使用原型和闭包来破坏自己的支持。有关示例实现，请参阅this answer的底部。

document.body.scrollLeft

如果您处于IE Quirks模式，则只有document.body。你不想处于Quirks模式。使用标准模式doctype，它是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); });

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

2 个答案: