0

コールバックを登録し、イベントに基づいて反復するイベント ハンドラーを作成しようとしています。

初期の実用的な例は次のようなものです。

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では、ネストされた this はどのコンテキストにありますか? 私が疑うクラスのインスタンスは、CountMe他の誰かのテイクが欲しいだけです。
4

1 に答える 1

1

最初のメソッドと同じように onclick イベントが機能するようにするには、これをどのように構築する必要がありますか?

キャッチされていない TypeError: オブジェクト # にはメソッド 'addEventListener' がありません

ひょっとしてそれが理由です。イベントリスナーを DOM 要素に追加する必要があるため、たとえば次のようにします。

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

変数eltは、正しくコメントされているように、プライベート スコープであり、外部からアクセスすることはできません。つまり、追加プロセスをコンストラクターに移動する (要素が決定可能な場合) か、まったくドロップする必要があります。

メソッド countClick で、ネストされた this はどのコンテキストにありますか? 私が疑う CountMe クラスのインスタンスは、他の誰かのテイクが欲しいだけです。

それは呼び出しに依存します。あなたのコードで

clickMe.countClick();

インスタンスclickMeはコンテキストになりますが、関数がイベント リスナーとして呼び出されると、DOM 要素がコンテキストになります。thisキーワードについては、MDN の概要を参照してください。たとえばhere で説明されているように、クロージャースコープの変数を使用して実際のインスタンスへの参照を保持できます（これについては多くの質問があります）。

考えられる 3 つのクイックフィックス:

  • 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-28T22:07:48.910 に答える