JavaScript事件处理程序功能范围控制

Question

I've got 3 interconnected methods inside an object:

    dragStartHandler: function(e) {
        console.log(e.type, 'dragstart', e.pageX, e.pageY);
        document.addEventListener('mousemove', this.dragMoveHandler, false);
        document.addEventListener('mouseup', this.dragEndHandler.bind(this), false);
    },

    dragMoveHandler: function(e) {
        console.log(e.type, 'dragmove', e.pageX, e.pageY);
        this.updateRotation();
    },

    dragEndHandler: function(e) {
        console.log(e.type, 'dragend', e.pageX, e.pageY);
        document.removeEventListener('mousemove', this.dragMoveHandler, false);
    },

They handle rotation based on mouse pointer position. I can't figure out what to do to have access to original this inside dragMoveHandler and be able to remove the element listener at the same time. I tried using .bind(this) but it returns anonymous function which I can't remove inside dragEndHandler .

Is there a technique I'm not aware of?

Answer 1

In the surrounding class you have to remember your class pointer, since this in javascript always points to the current execution/event context.

First of all I would suggest to rewrite your class definition to not use object-literal-syntax if possible.

Because then you could take advantage of a common pattern where you "remember" the original this reference in a variable (named self in this example):

var MyClass = function(){
  var self = this; // this line is important, since `this` can change you have to save it
  var dragStartHandler = function(e) {
        console.log(e.type, 'dragstart', e.pageX, e.pageY);
        document.addEventListener('mousemove', self.dragMoveHandler, false);
        document.addEventListener('mouseup', self.dragEndHandler.bind(self), false);
    }
  var dragMoveHandler = function(e) {
        console.log(e.type, 'dragmove', e.pageX, e.pageY);
        self.updateRotation();
    }

  var dragEndHandler = function(e) {
        console.log(e.type, 'dragend', e.pageX, e.pageY);
        document.removeEventListener('mousemove', self.dragMoveHandler, false);
    }
}