從事件偵聽器對象調用函數

Question

我有一個視圖模型是這樣的：

CANVAS = getElementById... 

RemixView = function(attrs) { 
    this.model = attrs.model; 
    this.dragging = false; 
    this.init(); 
}; 

RemixView.prototype = { 
    init: function() { 
     CANVAS.addEventListener("click", this.handleClick); 
    }, 
    handleClick: function(ev) { 
     var obj = this.getHoveredObject(ev); 
    }, 
    getHoveredObject: function(ev) {} 
    ... 
    ... 
} 
rv = new RemixView() 

問題是我當clickHandler事件觸發的事件，此對象等於CANVAS對象，不RemixView。所以我得到的錯誤說：

this.getHoveredObject is not a function 

什麼是正確的方法在那stutry？

Answer 1

通常的方法是使用一個簡單的關閉回調和捕捉this適當的值在一個局部變量，封閉可以參考：

RemixView.prototype = { 
    init: function(this) { 
     var _this = this; 
     CANVAS.addEventListener("click", function(ev) { 
      return _this.handleClick(ev); 
     }); 
    }, 
    //... 
}; 

Answer 2

你想bind處理函數：

CANVAS.addEventListener("click", this.handleClick.bind(this)); 

請注意，這可能不適用於較舊的瀏覽器，但有polyfills這些。

Answer 3

使prototype功能。

RemixView.prototype = function() { 
    init: function() { 
     CANVAS.addEventListener("click", this.handleClick); 
    }, 
    handleClick: function(ev) { 
     var obj = this.getHoveredObject(ev); 
    } ///... 
//... 
}