Я бы хотел, чтобы эксперт jQuery в своих словах объяснил, почему идентификатор $(document) рекомендуется другими для оператора jQuery on() и просто использует сам элемент
Пример 1: Почему лучше использовать $(document) здесь Пример # 2?
$(document).on("click", ".areaCodeList a", function(){
// do stuff
});
Пример 2: Почему этот элемент используется таким образом, чтобы не было хорошей практики по сравнению с примером 1?
$(".areaCodeList a").on("click", function(){
// do stuff
});
Оба значения действительны.
Первая работает для динамически добавленных элементов. Вы используете document, потому что вы делегируете события дочерним элементам документа, поэтому события выходят на уровень документа. Также удобнее выбрать ближайшего родителя (и родитель должен существовать на странице при загрузке).
Последний по-прежнему работает и является предпочтительным способом просто привязывать события к определенным элементам.
Я лично не рекомендую делегировать через объект document, а скорее ближайший родитель, который существует при загрузке страницы.
Здесь - документы для on().
Это неверно.
Эти две строки делают две разные вещи.
Первый - это делегированное событие с селектором ".areaCodeList a", а вторая строка - событие, присоединенное к элементам ".areaCodeList a".
Событие делегата будет срабатывать для каждого элемента ".areaCodeList a", хотя оно было в DOM, когда эта строка выполнена.
В любом случае, добавлять события делегата к document не рекомендуется вообще., как написано в live docs:
Поскольку все события .live() привязаны к элементу документа, события занимают самый длинный и самый медленный путь до того, как они будут обработаны
Прочтите on docs:
Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать на странице в момент, когда ваш код выполняет вызов .on(). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните привязку событий внутри обработчика документа для элементов, которые находятся в разметке HTML на странице. Если на страницу вводится новый HTML-код, выберите элементы и присоедините обработчики событий после того, как новый HTML будет помещен на страницу. Или используйте делегированные события для присоединения обработчика событий, как описано ниже.
Делегированные события имеют то преимущество, что они могут обрабатывать события из элементы потомков, которые будут добавлены в документ позже. От выбор элемента, который, как гарантируется, будет присутствовать во время делегированный обработчик событий, вы можете использовать делегированные события для избегайте частого подключения и удаления обработчиков событий. Эта элемент может быть элементом контейнера представления в Model-View-Controller, например, или документ, если событие обработчик хочет контролировать все пузырьковые события в документе. элемент документа доступен в начале документа до загружать любой другой HTML-код, поэтому безопасно присоединять события там без ожидая, когда документ будет готов.
...
...
Я думаю, вы путаете несколько концепций. Не рекомендуется привязываться к элементу документа, однако есть моменты, когда вы хотите это сделать, например, при привязке событий к динамически добавленным элементам.
Все это может показаться неясным, поэтому здесь - это первый пример, который напрямую использует селектор классов и связывает событие click, элемент вставлен динамически позже после события. Как вы можете видеть, событие никогда не запускается, потому что мы выбрали элемент, отсутствующий в DOM в момент привязки события. Это эквивалентно a .click
Теперь посмотрим на этот второй пример. Здесь вы видите, что мы определяем корневой элемент как document. Это означает, что событие click будет пузыриться до дерева DOM, а затем запустится, если элемент, который был нажат, имеет динамический класс. Это эквивалентно .live
Теперь, если в примере один, во время привязки события элемент присутствовал в DOM, код работал бы очень хорошо, как вы можете видеть .
Это сказано. Здесь за исключением docs, в котором разъясняется поведение выше.
Обработчики событий привязаны только к выбранным в данный момент элементам; Oни должен существовать на странице в момент, когда ваш код выполняет вызов .on()
Итак, в заключение. Используйте элемент document, если вы уверены, что нет родительского элемента для выбранного вами элемента, который, как гарантируется, находится в DOM в момент привязки события. Если присутствует родительский элемент, то используйте его вместо элемента document. Таким образом, событие не должно пузыриться до уровня document, оно должно перемещаться только на короткое расстояние.
Там ничего "не рекомендуется". Первый фрагмент устанавливает "делегированное" событие, последнее - "прямое". Документация для on() подробно объясняет это.
Делегированные события необходимы, когда вам нужно прослушивать события для тех элементов, которые еще не существуют, которые будут созданы динамически после, например, вызова AJAX. Иногда они также могут быть лучше по производительности - вам нужно меньше памяти для привязки "реального" обработчика событий к объекту документа, чем к 1000 кнопкам.
Я бы сказал, что он по-прежнему предпочитает использовать обработчики прямых событий, когда это возможно, или присоединяйте события делегата к элементу, как можно ближе к реальным источникам событий. Наличие всех обработчиков событий в объекте документа, вероятно, ужасно для производительности - вам нужно сопоставить каждое событие, возбужденное против всех селекторов. Это также, вероятно, необходимо, если вам нужно остановить событие от пузыря - если все события пойманы в документе, они уже всплыли, насколько они пойдут.
На самом деле лучшим решением в таком случае, как это, не используется $(document) ни конкретный элемент, как $("selector").
Наилучшим подходом является использование контейнера элемента и привязка селектора элементов к функции on. Делая это, вы избегаете ненужного события, пузырящегося в документе.
Итак, код должен выглядеть так:
$("this_is_the_container").on('event','my_element_selector',function(){
// do some stuff here
})