JavaScript事件處理程序功能范圍控制

Question

我在一個對象中有3個互連的方法：

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

它們根據鼠標指針的位置處理旋轉。 我不知道該怎么做能夠獲得原來這里面dragMoveHandler並能夠在同一時間刪除元素監聽。 我嘗試使用.bind（this），但是它返回匿名函數，該函數無法在dragEndHandler內部刪除 。

有我不知道的技術嗎？

Answer 1

在周邊類，你要記住你的類指針，因為this在javascript總是指向當前執行/事件上下文。

首先，我建議您重寫類定義，以盡可能不使用object-literal-syntax。

因為那樣的話，你可以采取一個共同的模式，你“記住”原來的優勢， this在一個變量（命名引用self在這個例子中）：

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