DOM イベント リスナーの表示
.png "Windows と Windows Phone に適用されます")
DOM エクスプローラーの [イベント] タブには、DOM 要素に関連付けられているイベントが表示されます。[イベント] タブの各トップ ノードは、現在有効なサブスクライバがあるイベントを示します。最上位のノードには、特定のイベントのために登録されたイベント リスナーを表すサブノードが含まれます。イベント リスナーの表示に加えて、このタブを使用して、JavaScript コード内のイベント リスナーの場所に移動できます。このトピックの情報は、HTML および JavaScript を使用するストア アプリに適用します。
[イベント] タブの一覧は動的です。アプリの実行中にイベント リスナーを追加すると、新しいイベント リスナーが一覧に表示されます。iイベント リスナーの追加と削除に関する情報については、このトピックの「問題をイベント リスナーで解決するためのヒント」を参照してください。
注意
DOM 要素でないコード要素 (xhr など) のイベント リスナーは、[イベント] タブには表示されません。
DOM 要素のイベント リスナーの表示
この例は、Windows Phone ストア アプリを示します。ここで説明する DOM Explorer の機能は、Windows ストア アプリでもサポートされます。
イベント リスナーを表示するには
Visual Studio で、Windows Phone ピボット アプリケーション プロジェクト テンプレートを使用する JavaScript アプリを作成します。
Visual Studio でテンプレートを開いた状態で、デバッガーのデバッグ ツールバーにあるドロップダウン リストから [Emulator 8.1 WVGA 4in 512MB] を選択します。
.png "デバッグのターゲットを選択する")
F5 キーを押して、アプリをデバッグ モードで実行します。
実行中のアプリで、[セクション 3] ピボット アイテムへ進みます。
Visual Studio に切り替えます (Alt + Tab キーまたは F12 キーを押します)。
DOM Explorer で、右上の [Find] を選択します。
「ListView」と入力し、Enter キーを押します。
必要に応じて、[次へ] を選択して、ListView コントロールを表す DIV 要素を検索します (この要素の data-win-control の値は WinJS.UI.ListView です)。
DOM Explorer で DIV 要素が選択された状態になります。
DOM エクスプローラーの右側にあるウィンドウで [イベント] タブを選択します。
次に示すように、DIV 要素のアクティブ サブスクライバーがあるイベントが表示されます。
![DOM Explorer の [イベント] タブ](images/hh703713.js_dom_events(vs.120).png "DOM Explorer の [イベント] タブ")
これらのイベントのイベント リスナーに移動するには、関連付けられた JavaScript ファイルのリンクを選択します。
DOM 階層の親要素のイベント リスナーを迅速に特定するには、DOM Explorer の下側にある階層リストの親要素を選択します。
.png "DOM 階層で親要素を選択する")
[イベント] タブは、階層リストで選択した要素のイベント リスナーを示します。
問題をイベント リスナーで解決するためのヒント
一部のアプリ シナリオでは、removeEventListener を使用して、イベント リスナーを明示的に削除する必要があります。DOM Explorer の [イベント] タブを使用して、イベント リスナーがコードの実行中に DOM 要素から除去されたかどうかをテストします。これらの問題の解決に役立つヒントを次に示します。
Visual Studio ストア アプリ用 JavaScript プロジェクト テンプレート に実装された単ページ ナビゲーション モデルを使用するアプリでは、 ページの一部を構成する DOM 要素などのオブジェクトに登録されたイベント リスナーを削除する必要は、通常ありません。このシナリオでは、DOM 要素およびその関連付けられたイベント リスナーの有効期間は同じであり、ガベージ コレクションが可能です。
DOM 要素またはオブジェクトの有効期間が関連付けられたイベント リスナーと異なる場合には、removeEventListener メソッドを呼び出す必要があります。たとえば、window.onresize イベントを使用する場合に、イベントを処理するページから離れるとイベント リスナーを削除しなければならない場合があります。
removeEventListener が指定のリスナーを削除できなかった場合は、別のオブジェクトのインスタンスが呼び出された可能性があります。bind メソッド (Function) (JavaScript) メソッドを使用して、リスナーを追加するときの問題を解決することができます。
bind メソッド (Function) (JavaScript) または匿名関数のどちらかを使用して追加されたイベント リスナーを削除するには、リスナーを追加するときに関数のインスタンスを保存します。このパターンを安全に使用するための 1 つの方法を次に示します。
// You could use the following code within the constructor function of an object, or // in the ready function of a PageControl object (Store app). this.storedHandler = this._handlerFunc.bind(this); elem.addEventListener('mouseup', this.storedHandler); // In this example, add the following code in the PageControl object's unload function. elem.removeEventListener('mouseup', this.storedHandler);バインドされた関数への参照を保存する代わりに次のコードを使用した場合、イベント リスナーを明示的に削除することはできなくなります。
// Avoid this pattern. No reference to the bound function is available. elem.addEventListener('mouseup', this._handlerFunc.bind(this));window.onresize = handlerFunc のような obj.on<eventname> 属性を使用して追加した場合には、removeEventListener を使用してイベント リスナーを削除することはできません。
アプリ内の メモリ使用量の分析 (JavaScript) に JavaScript メモリ アナライザーを使用します。明示的に削除されたイベント リスナーは、メモリー リークとして表示されることがあります。