JavaScript事件處理函數範圍控制研究

我有一個物體內部3種互聯的方法：JavaScript事件處理函數範圍控制研究

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（這個），但它返回了我無法刪除的匿名函數dragEndHandler。

有沒有我不知道的技術？

來源

2015-01-15 Richard the Lionheart

創建事件跟蹤器，並添加引用跟蹤器綁定的功能。 – Teemu 2015-01-15 16:18:41

你能否再詳述一下？ – 2015-01-15 19:10:44

創建一個具有附加事件方法的對象。調用這個方法而不是直接的'addEventListener'。然後在該方法中，您可以將元素，事件等推送到跟蹤器，並且還可以使用「綁定」方式來稍後移除事件。 [這是一個例子]（http://jsfiddle.net/pnb46b4m/）如何創建這樣一個對象。（在小提琴中只有一個屬性定義，代碼不能正常工作，它需要更多的上下文。） – Teemu 2015-01-15 19:24:56

在周圍的類中，您必須記住您的類指針，因爲JavaScript中的this始終指向當前的執行/事件上下文。

首先我建議將類定義改寫爲而不是如果可能，請使用object-literal-syntax。

因爲那樣的話，你可以採取一個共同的模式，你「記得」在一個變量（在本例中名爲self）原this參考的優勢：

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

來源

2015-01-15 16:20:31

如果OP使用對象文字構建對象？ – Teemu 2015-01-15 16:22:10

@Teemu你說得對，我在這裏添加了一些註釋。 – 2015-01-15 16:30:35

@ovm我正在使用聚合物，它都在一個Web組件內，所以我寧願堅持對象文字的一致性。但是我都是關於學習最佳實踐的，對於一般的obj文字來說是錯誤的，還是這種情況？我聽說過一些叫做object proxy patern的東西 - 它適用嗎？ – 2015-01-15 19:20:42

JavaScript事件處理函數範圍控制研究

回答

相關問題