共用方式為

檢視 DOM 事件接聽程式

  • 發行項

適用於 Windows 和 Windows Phone

DOM 總管的 [事件] 索引標籤會顯示與 DOM 項目相關聯的事件。[事件] 索引標籤中的每個最上層節點都表示具有有效訂閱者的事件。這個最上層節點包含表示特定事件之已登錄事件接聽程式的子節點。除了檢視事件接聽程式，您還可以使用這個索引標籤巡覽至 JavaScript 程式碼中事件接聽程式的位置。本主題中的資訊適用於使用 HTML 和 JavaScript 的市集應用程式。

[事件] 索引標籤上的清單是動態的。如果您在應用程式執行時加入事件接聽程式，則新事件接聽程式會在該處顯示。如需加入及移除事件接聽程式的資訊，請參閱本主題中解決事件接聽程式問題的秘訣。

注意事項注意事項

不是 DOM 項目 (如 xhr) 的程式碼項目事件接聽程式，就不會出現在 [事件] 索引標籤。

檢視 DOM 項目的事件接聽程式

此範例顯示 Windows Phone 市集應用程式。Windows 市集應用程式也支援這裡說明的 [DOM 總管] 功能。

檢視事件接聽程式

  1. 在 Visual Studio 中，建立使用 Windows Phone 樞紐分析應用程式專案範本的 JavaScript 應用程式。

  2. 這個範本在 Visual Studio 中開啟時，請在偵錯工具的 [偵錯] 工具列上，選取下拉式清單中的 [Emulator 8.1 WVGA 4 英吋 512MB]：

    選取偵錯目標

  3. 請按 F5 以偵錯模式執行應用程式。

  4. 在執行中應用程式內，移至 [區段 3] 樞紐分析項目。

  5. 切換至 Visual Studio (Alt+Tab 或 F12)。

  6. 在 [DOM 總管] 中，選擇右上角的 Find。

  7. 輸入 ListView，然後按 Enter。

  8. 如果需要，請選擇 [下一項] 按鈕尋找表示 ListView 控制項的 DIV 項目 (這個項目有值為 WinJS.UI.ListView 的 data-win-control 屬性)。

    現在 [DOM 總管] 中的 DIV 項目應處於已選取的狀態。

  9. 在 [DOM 總管] 右邊的窗格中，選擇 [事件] 索引標籤。

    您現在可以在這裡看到具有 DIV 項目有效訂閱者的事件。

    [DOM 總管] 的 [事件] 索引標籤

  10. 若要尋找這些事件的事件接聽程式，請選擇相關聯的 JavaScript 檔案連結。

  11. 若要快速識別 DOM 階層中父項目的事件接聽程式，請在 [DOM 總管] 底端的階層清單中選擇父項目。

    選取 DOM 階層中的父元素

    [事件] 索引標籤顯示您在階層清單中選擇之任何項目的事件接聽程式。

解決事件接聽程式問題的秘訣

在部分應用程式案例中，必須使用 removeEventListener (英文) 明確地移除事件接聽程式。使用 [DOM 總管] 中的 [事件] 索引標籤，測試是否已在執行程式碼時移除 DOM 項目的事件接聽程式。以下是一些協助解決這些類型之問題的秘訣：

  • 對於使用 Visual Studio 專案範本中所實作之單頁巡覽模式的應用程式，一般不需要移除針對 DOM 項目這類物件 (為頁面的一部分) 註冊的事件接聽程式。在此情況下，DOM 項目和其相關聯的事件接聽程式會有相同的存留期，而且可以對其進行記憶體回收。

  • 如果 DOM 項目或物件的存留期與相關聯的事件接聽程式不同，則可能需要呼叫 removeEventListener 方法。例如，如果您使用 window.onresize 事件，則在離開您已處理該事件的頁面時，可能需要移除事件接聽程式。

  • 如果 removeEventListener 無法移除指定的接聽程式，可能是在物件的不同執行個體上進行呼叫。加入接聽程式時，可以使用 bind 方法 (函式) (JavaScript) 方法來解決此問題。

  • 若要移除使用 bind 方法 (函式) (JavaScript) 或使用匿名函式所加入的事件接聽程式，請在加入接聽程式時儲存該函式的一個執行個體。以下是安全使用此模式的一種方式：

    // 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));

  • 如果使用 obj.on<eventname> 屬性 (例如 window.onresize = handlerFunc) 加入事件接聽程式，則無法使用 removeEventListener 移除事件接聽程式。

  • 使用 JavaScript 記憶體分析器，在應用程式中 分析記憶體使用量 (JavaScript)。必須明確移除的事件接聽程式可能會顯示為記憶體流失。

請參閱

概念

快速入門：偵錯 HTML 和 CSS

使用 DOM 總管偵錯 CSS 樣式

使用 DOM 總管偵錯配置