全局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

只有document.body当你处于IE Quirks模式时才会这样.你不想处于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};