Какой из вариантов лучше использовать для события 'cllick' и почему?

Question

[Роман Нестерук]

1. $('#id').click(func);
2. $(document).on('click', '#id', func);
3. $('#id').on('click', func);

Answer 1

[Stalker_RED]

Если именно id, то первый или третий - без разницы.
Если предполагается работа с динамически создаваемыми элементами, то второй.

К примеру, карта, на ней метки. Добавляем новые.

При вариантах 1 и 3 придется явно навешивать обработчики на все новые метки, а при методе 2, можно сделать один обработчик на весь класс. И он будет слушать события и от старых, и от новых меток.

UPD: да, и если вы заранее ограничите область "прослушивания" - это к лучшему. Намного лучше написать $('nav.menu').on('click', 'a', function(){}) чем

$(document).on('click', 'nav.menu a', function(){})

и по производительности, и по сложности поддержки, и по количеству возможных багов.

Comments

[Роман Нестерук]

А в чем 1 и 3 выигравыют если небольшое количество елементов?и на сколько велика разница в производительности?

[Stalker_RED]

Роман Нестерук: Заметной разницы в производительности не будет. Но если вы навешиваете обработчик для конкретного элемента (у вас же там id, а он должен быть уникальным в пределах документа) то не вижу смысла вешать его на document. Будет только мешать при отладке.

Answer 2

[Виталий Инчин ☢]

Если расставлять события на каждый элемент, они будут пораждать все больше и больше всплытий/погружений (да еще и внутри-jQuery-ных), что немного напрягает браузер. Еще надо учитывать, что на пути могут встретится stopPropagation, preventDefault и тому подобные заклинания.

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

$(document).on(event, selector, function);

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

Так что, выбирать необходимо по ситуации и только. Если бы был лучший способ, других бы не было.

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

Comments

[Роман Нестерук]

Если много обработчиков навещать на document это не будет напрягать браузер?

[Виталий Инчин ☢]

Роман Нестерук: не так сильно, как куча обработчиков в разных местах.

Answer 3

[Nikolay Talanov]

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

$(document).on("mousemove touchmove", function(event) {});

Comments

[Роман Журавлев]

Это третий