在对象中时未触发Javascript mousemove事件

Question

I hope your doing fine. Here's my problem :

This code works fine :

var imageMover = {
    mouseDown: function(e) {
        e.target.addEventListener("mousemove", mouseMoved, false);
        console.log('mouseDown');
    },
    mouseUp: function(e) {
        e.target.removeEventListener("mousemove", mouseMoved, false);
        console.log('mouseUp');
    }
};
function mouseMoved(e) {
    console.log("mouseMoved");
}

While this one is not :

var imageMover = {
    mouseDown: function(e) {
        e.target.addEventListener("mousemove", this.mouseMoved, false);
        console.log('mouseDown');
    },
    mouseUp: function(e) {
        e.target.removeEventListener("mousemove", this.mouseMoved, false);
        console.log('mouseUp');
    },
    mouseMoved: function(e) {
        console.log("mouseMoved");
    }
};

To give a little more context: There are thumbnails you can click on. When you click on it, the image is added to a container, and the events mouseUp and mouseDown are added to the image. When someone click on the image, i'd like the event mouseMouve to be attached so I can follow the image position.

mouseUp and mouseDown are well attached, and well triggered, but mouseMouve only works when it is not inside my imageMover object. It seems to be a scope problem, but I can't figure why it acts like that.

In advance, many thanks !

Answer 1

The this from this.mouseMoved is refering to the event target, which is the DOM element not the object storing the methods.

 var imageMover = { mouseDown: function(e) { console.log( 'this is refering to => ', this ); e.target.addEventListener("mousemove", this.mouseMoved, false); } }; document.querySelector( '.container' ).addEventListener( 'mousedown', imageMover.mouseDown ); 

 .container { width: 500px; height: 100px; border: 1px solid #000; } 

 <div class="container"></div>