javascript：如何使用類方法添加事件處理程序作爲回調？

如何添加一個類方法中的事件處理程序作爲回調???javascript：如何使用類方法添加事件處理程序作爲回調？

<div id="test">move over here</div> 
<script> 
    oClass = new CClass(); 
    function CClass() 
    { 
     this.m_s = "hello :-/"; 
     this.OnEvent = OnEvent; 
     with(this) 
     { 
      var r = document.getElementById("test"); 
      r.addEventListener('mouseover', this.OnEvent); // this does NOT work :-/ 
     } 

     function OnEvent() 
     { 
      alert(this); // this will be the HTML div-element 
      alert(this.m_s); // will be undefined :-() 
     } 
    } 
</script>

是的，我知道一些怪癖，使其工作，但什麼時候這些事件處理程序被引入的預期方式？我再有苦澀的感覺，那沒有人真正住接力:-(

這裏你玩：https://jsfiddle.net/sepfsvyo/1/

來源

2017-05-01 born loser

的this事件偵聽器回調中會引發該事件的元素如果您希望this是你的類的實例，則：

綁定功能的類的實例：

使用Function.prototype.bind，將創建一個新的功能，它的this值將永遠是你指定它是（類的實例）什麼：

r.addEventListener('mouseover', this.OnEvent.bind(this)); 
//           ^^^^^^^^^^^

裹的anounimous函數內部的功能：

var that = this; 
r.addEventListener('mouseover', function(ev) { that.OnEvent(ev); }); 
//        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

或使用arrow function（所以沒有必要that）：

r.addEventListener('mouseover', ev => this.OnEvent(ev)); 
//        ^^^^^^^^^^^^^^^^^^^^^^

注：作爲在commen提到上述兩種方法都將不同的功能傳遞給addEventListener（bind創建了一個新函數，而且函數顯然是!== this.OnEvent）。如果您打算以後刪除事件監聽器，你就必須存儲到函數的引用：

var reference; 
r.addEventListener('mouseover', reference = this.OnEvent.bind(this)); 
//        ^^^^^^^^^^^^

或：

var reference; 
var that = this; 
r.addEventListener('mouseover', reference = function(ev) { that.OnEvent(ev); }); 
//        ^^^^^^^^^^^^

，那麼你可以刪除事件偵聽器，如：

r.removeEventListener('mouseover', reference);

來源

2017-05-01 22:47:12

謝謝你的綁定函數。我想適當的oop風格將綁定在方法聲明'this.OnEvent = OnEvent.bind（this）;':-)在定義的末尾綁定將凍結（僅）Microsoft Edge 38.14393.0.0 :-（請參閱在這裏：https：//jsfiddle.net/sepfsvyo/3/ –

如果你添加了一些這些事件處理程序，你將如何去除其中的一個呢？它似乎與匿名函數無法關閉this.OnEvent後。？ – AwokeKnowing

@Akeke當我發佈答案時，我已經開始添加註釋了，但是覺得沒有必要。現在我對此有第二個意見，我添加了註釋。 –

最佳空中接力式的將是在函數聲明綁定：

this.OnEvent = OnEvent.bind(this);

非常感謝易卜拉欣mahrir爲我展示的方式:-)

來源

2017-05-07 21:24:02

javascript：如何使用類方法添加事件處理程序作爲回調？

回答

相關問題