Geek Answers Handbook

Global Javascript Event Processing Context

I have the following problem in event handlers in Javascript. I have an object that has a mousemove event handler.

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

};

The problem I'm trying to solve is resolving the context of the object. In my onMouseMove function, the currentMousePosition property is assigned. Naturally, this will not work, because it is a static function that handles the mousemove event.

What I'm looking for is a method / method for passing the context of an object using my event handler. The best example I can come up with is the Google Maps API function GEvent.bind (). With it, you can pass an object with the function that you want to run on the specified event. I am basically looking for the same thing.

+5
2

:

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

ECMAScript Fifth Edition function.bind:

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

( , function.bind, .)

function.bind , , . . .

document.body.scrollLeft

document.body, IE Quirks. Quirks. document.documentElement. , , , - IE5 - ( ):

var viewport= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
return {x: ev.clientX+viewport.scrollLeft, y: ev.clientY+viewport.scrollTop};
+6

-, .

:

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

More articles:


All Articles