2012-03-15 7 views
4

インライン関数を持たない私のプロジェクトでClass.prototypeベースのクラスを作成しようとしています。この例を考えてみると、自分のクラスにあるビデオオブジェクトのmyVideoのeventListenerを削除することは不可能です。JavaScript:Class.prototype関数としてイベントリスナーを削除

これは実際の生産コードではなく、理論的な例です。

var myClass = function() { 
    this.initialize(); 
} 

MyClass.prototype.myVideo = null; 

MyClass.prototype.initialize = function() { 
    this.myVideo = document.getElementById("myVideo"); 
    this.myVideo.addEventListener("ended", this.onMyVideoEnded, false); 
    this.myVideo.play(); 
} 

MyClass.prototype.onMyVideoEnded = function (event) { 
    // cannot remove event listener here 
    // this.myVideo.removeEventListener("ended", this.onMyVideoEnded, false); 
} 

Class.prototype機能としてハンドラを残して、リスナーを追加および削除する方法はあります。イベントハンドラとして削除されない匿名関数を残しておくと、この種のオブジェクトをインスタンス化してたくさん作成し、メモリリークやオブジェクトの永続性(以前に作成されたオブジェクトはすべて「終了」イベントを受け取る)を恐れています。

または、私はちょうど別のアプローチ(インライン関数、初期化関数内、イベントハンドラとして)を考慮する必要があります。これらは本当に読みやすさと一貫性に影響するので、私はすべてのコストでそれらを避けたいと思います。例えば

this.myVideoEndedHandler = this.onMyVideoEnded.bind(this); 
this.myVideo.addEventListener("ended", this.myVideoEndedHandler, false); 

リスナーを削除するにも保存されたハンドラを使用します。

this.myVideo.removeEventListener("ended", this.myVideoEndedHandler, false); 

をこれがあるので、あなたはそれを取り付けたコンテキストを使用して機能onMyVideoEndedbindする必要が

+0

ハンドラはリスナーです、そうですか?私はあなたの質問を本当に理解していません... – Upperstage

+0

ハンドラは、イベントが発生すると実行される関数です。リスナーは、[listener]が検出したときにイベントが発生したハンドラ関数を呼び出す言語構造です(わからない、イベントリスナーがどのように動作するか)。 – joncys

答えて

10

イベントがあなたの関数をトリガーするときonMyVideoEndedは間違ってthis引数になります。

+5

'foo.bind(bar)!= foo.bind(bar)'、元々バインドされたリスナーへの参照を保存しない限り、イベントリスナーを正しく削除することはできません。 – zzzzBov

+0

これは、洗練された、かなり簡単ですが、ActionScriptの背景からの些細なものではありません。私はあなたに、ありがとう!私はもう一度人生の喜びを感じます。 :} – joncys

+0

これは私にとってそれを解決しました!素晴らしい!ありがとうございました! – Giovanni

関連する問題