如何在類的實例上訪問事件監聽器？

尋求創建一個事件處理程序，該事件處理程序根據事件註冊回調並進行迭代。如何在類的實例上訪問事件監聽器？

早期，工作的例子是這樣的：

var elt = document.getElementById("square"), 
     clickCount = 0; 

    // call a priviledged method with access to prviate vars from 
    // outer scope 
    var count = function() { 
    clickCount += 1; 
    alert("you clicked me " + clickCount + " times!"); 
    }; 

    elt.addEventListener("click", count, false);

現在我想其實寫的東西JS我可以使用。這是目前建築：

//Create a class object 
function CountMe() { 

//privately scoped variables 
    var clickCount = 0; 

//methods on 'class' CountMe 
    this.countClick = function() { 
    //who's context am I in? 
    this.addCount(); 
    alert("you clicked me " + clickCount + " times!"); 
    }; 

    this.addCount = function() { 
    clickCount += 1 
    }; 
}; 

// Create an instance of countMe class 
var clickMe = new CountMe(); 

//Add an event listener for clicks 
document.getElementById("square").addEventListener("click", clickMe.countClick ,false)

我收到的錯誤是Uncaught TypeError: Object #<CountMe> has no method 'addEventListener' 給定一個HTML頁面是這樣的：

<html> 
<body> 
<div style="width:50px; height:50px; background-color:red;" id="square"> 
</div> 
</body> 
</html>

我的問題是：

如何來構造onclick事件的功能與第一種方法一樣嗎？
在方法countClick什麼上下文嵌套在這裏？我懷疑的CountMe類的實例，只是想要別人的。

來源

2012-06-28 rhodee

How should this be constructed so onclick events function as they do in the first method?

Uncaught TypeError: Object # has no method 'addEventListener'

這是obcously的原因。您需要將事件listenere添加到DOM元素，所以你可以例如做：

var clickMe = new CountMe(); 
document.getElementById("square").addEventListener("click", clickMe.countClick, false);

變量elt是，作爲正確地評論說，私下範圍的，不能從外部訪問。這意味着您只需將添加過程移到構造函數中（如果元素是可確定的），或者完全放棄它。

In the method countClick what context is the nested this in? The instance of the CountMe class I suspect, just want someone else's take.

這取決於調用。與您的代碼

clickMe.countClick();

實例clickMe會的背景下，但是當功能被稱爲事件偵聽器的DOM元素將是背景。有關this keyword的信息，請參閱MDN的概述。你可以使用一個閉包範圍變量來保存對實際實例的引用，例如描述爲here（關於這個有很多問題）。

三種可能的快速修復：

domel.addEventListener("click", clickMe.countClick.bind(clickMe), false)
domel.addEventListner("click", function(){clickMe.countClick();}, false)
var that=this; this.countClick=function(){ that.addCount(); alert(); };

來源

2012-06-28 22:07:48 Bergi

我給的鏈接看看。我更新了我的代碼示例，現在我得到以下錯誤：未捕獲的TypeError：Object＃沒有方法'addCount'。你能根據你的評論找出正確的答案嗎？ – rhodee

是的，現在問題/功能是上下文是DivElement而不是CountMe實例。 – Bergi

我已經概述了可能的解決方案，但是在閱讀有關問題時可能會自己找到並理解它們。 – Bergi

如何在類的實例上訪問事件監聽器？

回答

相關問題