Делегирование событий в JS

Делегирование событий в JS

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

скачать исходникискачать урок

Итак, для нашего примера добавим на страницу таблицу и кнопку:

Добавим немного стилей:

Теперь подключим библиотеку jQuery версии 1.8.3 (далее вы поймете, почему нужна версия не выше данной):

Итак, по задумке при клике по любой строке таблицы для этой строки должна фиксироваться подсветка, т.е. строка должна оставаться выделенной. Для этого в стилях предусмотрен класс stroke. При повторном клике этот класс должен удаляться и подсветка со строки убирается. Все просто.

Действительно, ничего сложного нет, когда мы работаем с уже имеющимися на странице элементами. Давайте попробуем применить данный код для динамически добавленных строк. У нас есть кнопка, при клике по которой будем добавлять в таблицу новую строку:

Если попробуем добавить несколько строк, то увидим, что ни для одной новой строки класс не устанавливается. Для уже имеющихся строк все работает, как и прежде. Как же быть? Здесь нам нужно обратиться, к т.н. делегированной обработке событий, т.е. делегировать событие клика для добавляемых строк. Подробнее о делегировании событий можно прочесть в этой статье.

До версии 1.9 (именно поэтому мы подключили библиотеку 1.8.3) для этой цели мы можем использовать метод live(), т.н. умный обработчик событий. Использование этого метода довольно просто. Давайте немного перепишем код:

Вот теперь все работает, как нам и нужно. Класс меняется теперь и для добавленных строк. Однако здесь есть ложка дегтя. Дело в том, что метод live() с версии 1.9 был удален. Таким образом, если вам нужно использовать библиотеку jQuery версии 1.9 или выше, то текущий код работать не будет. Вместо метода live() теперь для делегирования событий можно использовать метод on(). Этот метод чуть сложнее в использовании и понимании (недаром метод live() назван умной обработкой событий), но стоит разобраться в его использовании, и вы поймете, что на самом деле ничего сложного нет.

Итак, перепишем код с учетом использования метода on():

Как видим, здесь в коллекцию мы отбираем не строки, а всю таблицу целиком. А вот в методе on() использован вторым параметром указатель на те элементы, для которых событие (указано первым параметром) делегируется. Т.е. получается, что мы должны взять некий внешний контейнер (таблица) и делегировать событие для составных элементов (строки). Вот, собственно, и все, ничего сложного нет.

На этом текущий урок завершен. Удачи и до новых встреч!

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (6)