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

我在Javascript中的事件处理程序中遇到以下问题.我有一个像这样有一个mousemove事件处理程序的对象.

function MyObject(){ }
function MyObject.prototype = {

    currentMousePosition: null,
    onm ouseMove: 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()
有了它,您可以使用要在指定事件上触发的函数传递对象.我基本上都在寻找同样的东西.

解决方法:

今天,许多人通过明确的关闭来做到这一点：

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

标签：javascript,oop,javascript-events,objectcontext
来源： https://codeday.me/bug/20190518/1130620.html