檢視 DOM 事件接聽程式

Visual Studio 2015
 

如需 Visual Studio 2017 的最新文件請參閱 Visual Studio 2017 文件

適用於 Windows 和 Windows Phone

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

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

System_CAPS_ICON_note.jpg 注意

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

此範例顯示 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.ListViewdata-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 方法 (函式) 方法來解決此問題。

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

    // 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 總管偵錯配置

顯示: