Присоединение обработчика событий в JQuery. Direct-bound vs. Delegated

Question

Я делаю одностраничное приложение. Когда хеш изменен, новые элементы загружаются в страницу через ajax.

Я хочу установить обработчик событий для новых элементов. Есть два пути.

1. Каждый обработчик событий делегирован при запуске.

   $("body").on(event, "element", handler)

2. Всякий раз, когда хэш изменяется, handeler событие непосредственно связанный с новым элементом. Итак, перехват и удаление обработчиков повторяются.

   $("element").on(event, handler)

Что работает лучше? (время нахождения элементов по сравнению с повторяющимся временем удаления связывания) (Извините, мой английский плохой)

Answer 1

Это может помочь получить дополнительную информацию о том, как работает это одностраничное приложение, но, возможно, вы можете рассмотреть эти руководящие принципы

• Насколько динамична ваша страница? Если он довольно статичен (не изменяется, это может быть преждевременная оптимизация)
• Сколько здесь элементов DOM? Чем больше элементов DOM необходимо подключать индивидуально, тем больше работы должно быть выполнено, больше потребления памяти и т. Д.
• Насколько глубоко вложены ваши элементы DOM? Более глубокое гнездование означает больше пузырей событий.
• В случае нахождения элемента по id, поиск с точки зрения jQuery чрезвычайно быстрый, поскольку имена идентификаторов элементов DOM должны быть уникальными, и обычно он использует собственный метод getElementById.
• В случае поиска элементов по тегу у вас должен быть один тег тела, но вы можете иметь несколько сотен тегов div, если это то, что вы выбираете.
• Когда вы еще не уверены, пришло время задействовать инструменты разработчика Chrome, чтобы помочь вам в дальнейшей настройке и диагностике потенциальных проблем производительности, которые могут возникнуть.
• Механизм селектора jQuery является чрезвычайно мощным и гибким, но не все селекторы выполняют то же самое. Вы можете написать gnarly селектор, который излишне загружает браузер без необходимости.

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

Я надеюсь, что это было полезно.