Обробка подій на jquery

Відео: Відеокурс JQuery. Урок 5. Події та обробники подій в jQuery

Відео: JQuery-делегування обробки події

Події в jаvascript є найважливішою складовою більшості скриптів. Фактично, більшість завдань, які робляться в jаvascript, починають свою роботу при виникнення якої-небудь події. У цій статті ми розберемо, як реалізована обробка подій в jQuery.

Перш ніж приступати до подій, важливо відразу зрозуміти, що є 2 типу елементів: створені безпосередньо самим сервером і додані після за допомогою jаvascript. Події, що виникають на першому типі елементів, можна обробляти в такий спосіб:

Код досить прозорий, але все одно поясню. Події встановлюються за допомогою методу bind. Першим параметрів йде назва події, в прикладі - це "click". Безумовно, подій досить багато. Другим параметром йде функція, яку ми відразу реалізуємо. Також можна було цю функцію оголосити в іншому місці, а в якості 2-го параметра вказати лише її ім`я.

Тепер розберемо, як ставити обробку подій не тільки на створені заздалегідь елементи, але і на ті, які були створені вже за допомогою jаvascript. Для цього раніше був метод live (), однак, в нових версіях jQuery він уже не працює, тому зараз використовується метод on ():

В даному прикладі був використаний метод on (). Першим параметром йде назва події, потім до яких елементів підключається ця подія, а після назва функції. У цьому прикладі я вирішив винести функцію окремо, щоб продемонструвати, як обійтися без function () {} всередині методу. Також був використаний об`єкт event, який передається в функцію-обробник після виникнення події. Даний об`єкт містить багато властивостей, і найпопулярніше з них - це target, що містить елемент, на якому виникло подія. Останнє я, думаю, не потребує коментарів.

І зверніть увагу, що якщо bind () можна застосовувати тільки для створених спочатку елементів, то метод on () працює з усіма елементами: і старими, і новими.

Більш докладно про обробку подій в jQuery, а також конкретні приклади з практики, я розглядав в цьому курсі курсі.