javascript object, seeing expected result using two different ways of calling function

Question

I don't understand why this is happening...

I need to get the objects startPoint which is set on mousedown and the current e.pageY from the mousemove to do some calculations.

var adjustHeight = {
    change: function(e) {
        console.log(this.startPoint)
        console.log(e.pageY);
    },
};

$('#dragger').mousedown(function(e) {
    e.preventDefault();

    adjustHeight.startPoint = e.pageY;

    $(window).on('mousemove', adjustHeight.change());

    $(window).on('mouseup', function() {
        $(window).off('mousemove', adjustHeight.change())
    });
})

However the console prints out the objects startPoint which is what I expect but e.pageY is undefined

but when I use this line instead

...
    $(window).on('mousemove', adjustHeight.change);

    $(window).on('mouseup', function() {
        $(window).off('mousemove', adjustHeight.change)
    });
...

I get the e.pageY as expected but now the startPoint is undefined. When I checked what this was pointing at it was the DOMWindow....

My question is why is this happening and how would I go about getting both objects properties and the functions e at the same time?

Answer 1

$(window).on('mousemove', adjustHeight.change());

is executing adjustHeight.change immediately and passing the return value to .on() . Since you are not passing any argument to adjustHeight.change , e will be undefined (and e.pageY won't be available).

---

$(window).on('mousemove', adjustHeight.change);

correctly passes the function to .on , hence later the event object is passed to the handler and you can access e.pageY . But the context ( this ) is not adjustHeight anymore, it's the DOM element you bound the handler to. Which is window in this case and window does not have a startPoint property.

The MDN documentation has an excellent article about this (in general), as does quirksmode.org (with respect to event handlers).

---

Solution :

Pass a new function as handler, which calls adjustHeight.change and passes the event object:

$(window).on('mousemove', function(event) {
    adjustHeight.change(event);
});

or bind adjustHeight.change to adjustHeight using $.proxy ^[docs] :

$(window).on('mousemove', $.proxy(adjustHeight.change, adjustHeight));

Since you also want to unbind the handler later, you should either assign it to a variable or use a namespaced event ^[docs] .

Example:

$(window).on('mousemove.dragger', $.proxy(adjustHeight.change, adjustHeight));

$(window).on('mouseup.dragger', function() {
    // removes both, the mousemove and mousup event handlers
    $(window).off('.dragger');
});

Answer 2

First of all, this is wrong:

$(window).on('mousemove', adjustHeight.change());

Then, change() is not bound to adjustHeight by default. You'd have to do something like:

$(window).on('mousemove', function() {
    adjustHeight.change();
});

Or, in modern browsers:

$(window).on('mousemove', adjustHeight.change.bind(adjustHeight));

Answer 3

...

$(window).on('mousemove', adjustHeight.change);

$(window).on('mouseup', function() {
    $(window).off('mousemove', adjustHeight.change)
});

...

(line:3)

console.log("start:" + adjustHeight.startPoint)