Просмотр прослушивателей событий DOM

На вкладке События проводника DOM отображаются события, связанные с элементом DOM. Каждый узел верхнего уровня на вкладке События представляет событие, у которого есть активные подписчики. Узел верхнего уровня содержит вложенные узлы, представляющие зарегистрированные прослушиватели событий для указанного события. Помимо просмотра прослушивателей событий, этой вкладкой можно пользоваться для перехода к расположению прослушивателя событий в коде JavaScript. Информация, содержащаяся в данном разделе, относится к приложениям Магазина на базе HTML и JavaScript.

Список на вкладке События является динамическим. Если добавить прослушиватель событий во время выполнения приложения, в списке появится новый прослушиватель событий. Сведения о добавлении и удалении прослушивателей событий см. в подразделе Советы по решению проблем с прослушивателями событий данного раздела.

Примечание

Прослушиватели событий для элементов кода, которые не являются элементами DOM, таких как xhr, на вкладке События не отображаются.

Просмотр прослушивателей событий для элементов DOM

В этом примере показано приложение Магазина Windows Phone. Описанные здесь функции проводника DOM также поддерживаются для приложений Магазина Windows.

Просмотр прослушивателей событий

1. Создайте в Visual Studio приложение JavaScript, используя шаблон проекта "Приложение с Pivot" Windows Phone.

2. Открыв шаблон в Visual Studio, выберите Emulator 8.1 WVGA 4in 512MB в раскрывающемся списке на панели инструментов "Отладка" отладчика:

   

3. Нажмите клавишу F5, чтобы запустить приложение в режиме отладки.

4. В выполняемом приложении перейдите к элементу Pivot Раздел 3.

5. Перейдите в Visual Studio (Alt+Tab или F12).

6. В проводнике DOM выберите Find в правом верхнем углу.

7. Введите ListView и нажмите клавишу ВВОД.

8. При необходимости нажмите кнопку Далее, чтобы найти элемент DIV, представляющий элемент управления ListView (у этого элемента значение data-win-control равно WinJS.UI.ListView).

   Теперь элемент DIV должен быть выбран в проводнике DOM.

9. Перейдите на вкладку События в области в правой части проводника DOM.

   Теперь можно увидеть события с активными подписчиками для элемента DIV, как показано на ниже.

   

10. Чтобы найти прослушиватели событий для этих событий, выберите связанные ссылки на файл JavaScript.

11. Чтобы быстро идентифицировать прослушиватели событий для родительских элементов в иерархии DOM, выберите родительский элемент в иерархическом списке в нижней части проводника DOM.

    

    На вкладке События отображаются прослушиватели событий для любого элемента, выбранного в иерархическом списке.

Советы по решению проблем с прослушивателями событий

В некоторых сценариях приложений прослушиватели событий необходимо явным образом удалить, используя removeEventListener. Воспользуйтесь вкладкой События в проводнике DOM, чтобы проверить, были ли удалены прослушиватели событий из элементов DOM во время выполнения кода. Далее приведено несколько советов по устранению проблем такого типа:

• Для приложений, которые используют модель одностраничной навигации, реализованную в шаблонах проекта Visual Studio, обычно не требуется удалять прослушиватели событий для объектов, таких как элементы DOM, являющихся частью страницы. В данном сценарии элемент DOM и сопоставленные с ним прослушиватели событий имеют одинаковое время существования и могут участвовать в сборе мусора.

• Если время существования элемента DOM или объекта отличается от времени существования сопоставленного прослушивателя событий, вам может потребоваться вызвать метод removeEventListener. Например, если вы используете событие window.onresize, может потребоваться удалить прослушиватель событий при покидании той страницы, на которой обрабатывается это событие.

• Если removeEventListener не удается удалить указанный прослушиватель, он может быть вызван в другом экземпляре объекта. Вы можете использовать метод Метод bind (Function) (JavaScript) для решения данной проблемы при добавлении прослушивателя.

• Чтобы удалить добавленный прослушиватель событий с помощью Метод bind (Function) (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));
  

• Вы не можете удалить прослушиватель событий с помощью removeEventListener, если добавили его с помощью атрибута obj.on<eventname>, такого как window.onresize = handlerFunc.

• Используйте анализатор памяти JavaScript для Анализ использования памяти (JavaScript) в своем приложении. Прослушиватели событий, которые необходимо явным образом удалить, могут отображаться в качестве утечки памяти.

См. также

Основные понятия

Краткое руководство по отладке HTML и CSS

Отладка стилей CSS с использованием проводника DOM

Отладка макета с использованием проводника DOM