У цій практичній роботі ми розглянемо обробку подій від елементів форми.
Нагадуємо:бібліотека jQuery пропонує нам ефектний спосіб реєстрації обробників подій у елементів за допомогою методу bind.
Метод bind має наступний синтаксис: bind('тип_події', функція_обробника_події). Використовуючи в обробнику вираз $(this) ми можемо отримати елемент, у якому було зроблено подія. Застосовуючи метод bind, важливо враховувати, що він додає обробники вже для наявних елементів. До динамічно доданих елементів обробники не застосовуватимуться.
Якщо з якоїсь причини нам більше не потрібно обробляти подію, ми можемо скасувати реєстрацію пов'язаного з нею обробника за допомогою методу unbind
Метод one дозволяє задати для елемента обробник події, який спрацьовуватиме лише один раз. Після відпрацювання буде видалено обробник
Завдання: на сторінці чотири квадратики і форма з чотирьох чекбоксів, чотирьох радіокнопок, а також кнопка "Очистити". Під чекбоксами та радіокнопками підписані кольори. Поставивши галочку на чекбокс, ви заповнюєте квадратик відповідним кольором. Вибираючи радіокнопку, ви змушуєте квадратик відповідного кольору рухатися.
1 .Щоб отримати таку сторінку, виконаємо наступну розмітку:
Спочатку перевіримо чи сформувалось дом-дерево.
Тепер пишемо оброники подій
1)Функція зміни кольору квадратика
2)Функція для руху квадратика
3)Обробник події для чекбоксів
4)Обробник події для радіокнопок
5) Обробник події для кнопки "Очистити" та тригер для виклику функції переміщення під час завантаження сторінки.
Для створення подій користувача в jQuery використовуються методи on і trigger jQuery метод .trigger() дозволяє виконати всі функції обробники подій, приєднані у вибраного елемента для даного типу події.
$( selector ).trigger( eventType, extraParameters )
eventType - String Строкове значення, яке відповідає одному типу подій
Наприклад: "click" або "dblclick.myNamespace"
extraParameters - Array або PlainObject.Додаткові параметри для передачі обробнику подій.
Результат.
