Делегування подій в JS

35

Від автора: основний алгоритм роботи при використанні бібліотеки jQuery полягає у відборі елементів в колекцію і вчинення будь-яких дій при настанні тієї чи іншої події для обраної колекції. Все це легко зробити з елементами, які були на сторінці спочатку, тобто перебувають у вихідному коді. Однак нерідко на сторінку динамічно додаються нові елементи. І ось тут є деякі нюанси при відстеженні подій для знову доданих елементів. У цьому уроці ми розглянемо ці нюанси і познайомимося з таким поняттям, як делегування подій.

Делегування подій в JSДелегування подій в JS

Отже, для нашого прикладу додамо на сторінку таблицю і кнопку:

Додати рядок

# Найменування Ціна Про послугу
1 Заміна акумулятора в iPad 2 1171 грн. Детальніше
2 Заміна Вібродзвінка в iPhone 5 1171 грн. Детальніше

Додамо трохи стилів:

.zebra{
width: 100%;
}
.zebra th{
background: #555;
color: #fff;
}
.zebra input{
width: 100%;
}
.zebra th:first-child,
.zebra td:first-child{
width: 100px;
text-align: center;
}
.zebra th,
.zebra td{
border-bottom: 1px solid #ccc;
/*border: 1px solid #ccc;*/
padding: 5px;
vertical-align: middle;
padding: 14px 0;
}
.zebra tr{
transition: all .5s;
}
tr:hover,
.stroke{
background: #cfcfcf;
}
table{
border-collapse: collapse;
}

Тепер підключаємо бібліотеку jQuery версії 1.8.3 (далі ви зрозумієте, чому потрібна версія не вище даної):

Отже, за задумом при кліці по будь-якому рядку таблиці для цього рядка повинна фіксуватися підсвічування, тобто рядок повинна залишатися виділеної. Для цього в стилях передбачений клас stroke. При повторному натисканні цей клас повинен віддалятися і підсвічування з рядка прибирається. Все просто.

$(function(){
$(«.zebra tr»).click(function(){
$(this).toggleClass(«stroke»);
});
});

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

$(function(){
var html = ‘

XX Нова рядок ХХХХ грн. Детальніше

‘;
$(«.zebra tr»).click(function(){
$(this).toggleClass(«stroke»);
});
$(«#add»).click(function(){
$(«.zebra tbody»).append(html);
});
});

Якщо спробуємо додати кілька рядків, то побачимо, що для жодної нової рядки клас не встановлюється. Для вже наявних рядків все працює, як і раніше. Як же бути? Тут нам потрібно звернутися, до т. зв. делегованої обробці подій, тобто делегувати подія кліка для доданих рядків. Детальніше про делегування подій можна прочитати в цій статті.

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

$(function(){
var html = ‘

XX Нова рядок ХХХХ грн. Детальніше

‘;
$(«.zebra tr»).live(«click», function(){
$(this).toggleClass(«stroke»);
});
$(«#add»).click(function(){
$(«.zebra tbody»).append(html);
});
});

Ось тепер все працює, як нам і потрібно. Клас змінюється тепер і доданих рядків. Однак тут є ложка дьогтю. Справа в тому, що метод live() з версії 1.9 був видалений. Таким чином, якщо вам потрібно використовувати бібліотеку jQuery версії 1.9 або вище, то поточний код працювати не буде. Замість методу live() тепер для делегування подій можна використовувати метод on(). Цей метод трохи складніший у використанні і розумінні (недарма метод live() названий розумною обробкою подій), але варто розібратися в його використанні, і ви зрозумієте, що насправді нічого складного немає.

Отже, перепишемо код з урахуванням використання методу on():

$(function(){
var html = ‘

XX Нова рядок ХХХХ грн. Детальніше

‘;
$(«.zebra»).on(«click», «tr», function(){
$(this).toggleClass(«stroke»);
});
$(«#add»).click(function(){
$(«.zebra tbody»).append(html);
});
});

Як бачимо, тут в колекцію ми відбираємо не рядки, а всю таблицю. А ось у методі on() використаний другим параметром вказівник на ті елементи, для яких подія (зазначено першим параметром) делегується. Тобто виходить, що ми повинні взяти якийсь зовнішній контейнер (таблиця) і делегувати подія для складових елементів (рядки). Ось, власне, і все, нічого складного немає.

На цьому поточний урок завершено. Удачі і до нових зустрічей!