イベントハンドラはどこに接続されていますか、なぜそれがすべて存在しますか？

Question

TypescriptをJQueryで使用するダイアログを作成し、2つのボタンとウィンドウタイトルの「X」にクリックイベントをアタッチします。このコードは、ユーザーがダイアログを開くことを望むたびに新しいSettingDlogオブジェクトを実際に作成しますが、ユーザーが[設定]ダイアログを表示するたびに追加のイベントが追加されるように見えます。

クリックイベントがDOMオブジェクトに追加されている可能性があります。これは、JavaScriptがtypescriptクラス（JavaScriptオブジェクト）に依存しないためですが、DOMエクスプローラでは表示されません。

回避策として、イベントハンドラが呼び出されたときに明示的に削除しますが、毎回新しいSettingDlogオブジェクトを作成しているので、なぜこれを行う必要があるのか​​わかりません。

コードダイアログ表示する：ユーザーがダイアログを閉じ3つのUIElementのいずれかをクリックしたときに最後に

show() { 
    $('#closeX').click({ isOK: false }, this.onClose.bind(this)) 
    $('#btnCancel').click({ isOK: false }, this.onClose.bind(this)) 
    $('#btnOK').click({ isOK: true }, this.onClose.bind(this)); 
} 

：私が持っているSettingsDlogため

let myDlog = new SettingsDlog(); 
myDlog.closedCallback = "settingsDlog_Closed"; 
myDlog.show(); 

その後ショーで（）メソッドを設定ダイアログのonClose（）メソッドが呼び出されます。

onClose(event) { 
    this.dialogResult = event.data.isOK; 
    if (!AppHelper.isNullOrEmpty(this._closedCallback)) 
     MainPage[this._closedCallback](this); 
} 

最後に_c losedCallbackは、メインページのオブジェクトに対して呼び出されます。

settingsDlog_Closed(sender: SettingsDlog) { 
     if (!sender.dialogResult) 
      return; 
     // if here do something useful... 
} 

私はsettingsDlog_Closedでブレークポイントを入れて、私は二度目ダイアログ設定を表示するためにクリックする（または第三の...）、第2かのように行動している（または3番目の）クリックイベントが追加されています。

これは私が回避策としてSettingsDlogのonClosed方法に追加しているコードです：

$('#closeX').off('click'); 
$('#btnCancel').off('click'); 
$('#btnOK').off('click'); 

誰かが私はこの奇妙な振る舞いを理解するのに役立つことはできますか？

Answer 1

正しい方向に私を向けるための@Patrick Evansに感謝します。これは私が知る必要があったものです。 How to check whether dynamically attached event listener exists or not?

これを念頭に置いて、 "show"メソッドが呼び出されると、Trueに設定された静的変数をSettingsDlogクラスに追加しました。その後のクラスのオブジェクトのインスタンス化は、イベントハンドラの添付プロセスを複製しません。