标签：javascript oop javascript-events objectcontext

我在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。