View DOM event listeners
The list on the Events tab is dynamic. If you add an event listener while the app is running, the new event listener will appear there. For info on adding and removing event listeners, see Tips for resolving issues with event listeners in this topic.
Event listeners for code elements that aren't DOM elements, such as xhr, don't appear on the Events tab.
This example shows a Windows Phone Store app. The DOM Explorer features described here are also supported for Windows Store apps.
To view event listeners
With the template open in Visual Studio, select Emulator 8.1 WVGA 4in 512MB in the drop-down list on the Debug toolbar in the debugger:
Press F5 to run the app in debug mode.
In the running app, go to the Section 3 pivot item.
Switch to Visual Studio (Alt+Tab or F12).
In DOM Explorer, choose Find in the upper-right corner.
Type ListView, and then press Enter.
If necessary, choose the Next button to find the DIV element that represents the ListView control (this element has a data-win-control value of WinJS.UI.ListView).
The DIV element should now be selected in DOM Explorer.
Choose the Events tab in the pane on the right side of DOM Explorer.
You can now see the events that have active subscribers for the DIV element, as shown here.
To quickly identify event listeners for parent elements in the DOM hierarchy, choose a parent element in the hierarchy list at the bottom of the DOM Explorer.
The Events tab shows event listeners for any element that you choose in the hierarchy list.
In some app scenarios, event listeners must be explicitly removed using removeEventListener. Use the Events tab in the DOM Explorer to test whether event listeners have been removed from DOM elements while running code. Here are some tips to help resolve these types of issues:
For apps that use the single-page navigation model implemented in the Visual Studio project templates, it's not typically necessary to remove event listeners registered for objects, such as DOM elements, that are part of a page. In this scenario, a DOM element and its associated event listeners have the same lifetime, and they can be garbage-collected.
If the lifetime of the DOM element or object is different from the associated event listener, you might have to call the removeEventListener method. For example, if you use the window.onresize event, you might have to remove the event listener if you navigate away from the page where you handle the event.
// 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);
If you use the following code instead of storing a reference to the bound function, you won't be able to remove the event listener explicitly:
You can't remove an event listener by using removeEventListener if you added it by using the obj.on<eventname> attribute, such as window.onresize = handlerFunc.