View DOM event listeners

applies to both windows and phone

The Events tab of DOM Explorer shows the events that are associated with a DOM element. Each top node in the Events tab represents an event that has active subscribers. The top node contains subnodes that represent the registered event listeners for the specific event. In addition to viewing the event listeners, you can use this tab to navigate to the location of the event listener in the JavaScript code. The information in this topic applies to Store apps using HTML and JavaScript.

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 on resolving issues with event listeners in this topic.

Note Note

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

  1. In Visual Studio, create a JavaScript app that uses the Windows Phone Pivot Application project template.

  2. 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:

    Selecting a debug target
  3. Press F5 to run the app in debug mode.

  4. In the running app, go to the Section 3 pivot item.

  5. Switch to Visual Studio (Alt+Tab or F12).

  6. In DOM Explorer, choose Find in the upper-right corner.

  7. Type ListView, and then press Enter.

  8. 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.

  9. 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.

    Events Tab of the DOM Explorer
  10. To locate the event listeners for these events, choose the associated JavaScript file links.

  11. 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.

    Selecting parent elements in the DOM hierarchy

    The Events tab shows event listeners for any element that you choose in the hierarchy list.

In some app scenarios, event listeners need to be explicitly removed. The Events tab in the DOM Explorer is useful for testing whether event listeners have been removed from DOM elements while running code. The following tips may help to resolve these types of issues.

  • For apps that use the single-page navigation model implemented in the Visual Studio project templates, it is 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 may need to call removeEventListener. For example, if you use window.onresize, you may need to remove the event listener if you navigate away from the page where you handle the event.

  • If removeEventListener fails to remove the specified listener, it may be getting called on a different instance of the object. You can use bind Method (Function) (JavaScript) to resolve this issue when you add the listener.

  • To remove an event listener that was added using bind Method (Function) (JavaScript), you need to store an instance of the bound function when you add the listener. The following code shows one way to safely use this pattern.

    // 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 don't store a reference to the bound function, and instead use the following code, you will not be able to remove the event listener explicitly.

    // Do not use. No reference to the bound function is available.
    elem.addEventListener('mouseup', this._handlerFunc.bind(this));
    
  • You can't remove an event listener using removeEventListener if you added it using the obj.on<eventname> attribute, such as window.onresize = handlerFunc.

  • Use the JavaScript memory analyzer to Analyze memory usage (JavaScript) in your app. Event listeners that need to be explicitly removed may appear as a memory leak.

Show:
© 2014 Microsoft. All rights reserved.