8.Подія onClick
Одна з найбільш загальних цілей JavaScript— розширення HTML-формы і досягнення у такий спосіб більшого ступеня взаємодії з користувачем. Якщо це так, можливо, єдина найбільш часта подія, з якою працюватимуть більшість розробників, — це подія click. Подія click викликається, коли користувач клацає на якому-небудь об'єкті, призначеному для натиснення. Для більшості комп'ютерних середовищ подія click викликається тільки після того, як задана за умовчанням кнопка миші натиснута і відпущена. Користувач, який триматиме кнопку миші і не відпустить її на об'єкті, подія
click об'єкту не викличе.
Коли подія click відбувається, обробник подій onClick для натиснутого об'єкту виконує одну (або більше) JavaScript-команд або викликає певну функцію.
У HTML об'єкт Button визначається таким чином:
<input type=button name="ViewHat" value="View Hat"
onClick="displayHat( )">
У розділі <head> HTML-файла записується метод displayHat(), який викликатиметься при виклику обробника подій кнопки onClick:
<head>
<script language="JavaScript">
<!--
//Обробник подій onclick
function displayHat() {
hatWindow = window.openf'http://"www.myhat.com", "View MyHat",
"toolbar=0
width=200,height=400,resizable=0");
}
</script>
</head>
Коли користувач натискає кнопку, обробник подій використовує метод ореn() об'єкту Window для виводу на дисплей вікна, що містить певне зображення.
Обробник подій OnClick існує не тільки для кнопок; його можна використовувати для відповіді на включення прапорців, вибір перемикачів і клацання на об'єктах Link. Через характер цих елементів управління настройка їх події click зустрічається рідко. Прапорці і перемикачі часто використовуються для введення даних і обчислюються після виконання на них клацання.
Що стосується об'єкту Link, то він використовується раніше усію як посилання на розташування, вказане в його властивості href, і в додаванні коди часто немає необхідності, якщо тільки не потрібно міняти його задану за умовчанням поведінку.
Для прапорців, посилань, перемикачів, а також для кнопок "Reset" і "Submit" можна повертати значення false від обробника подій onClick, щоб відмінити дію, що викликається. Наприклад, якщо потрібно підтвердити, чи дійсно виставлений прапорець, в його обробник подій onCIick додається наступний код:
<input type= 'Checkbox" name="checkboxl'
value="DeluxeRoom"
onClick="return confirm('Deluxe rooms are expensive. Are you sure?') ">
Deluxe Room very
При відправці форми (onSubmit) одна з переваг використання JavaScript в HTML-формах — можливість виконання перевірки правильності даних на стороні клієнта замість перекладання цього завдання на і без того переобтяжений сервер. Перевірку правильності можна виконувати для кожного поля окремо або для всіх полів відразу. Залежно від контексту використовується один або обидва методи.
Для перевірки правильності даних у всіх полях відразу, так само як і для інших завдань, головне значення має подію submit. Ця подія генерується якраз перед відправкою HTML-формы. Додавання коди в обробник подій onSubmit об'єкту Form дає можливість зробити перевірку, а потім вирішити продовження або блокувати його, повідомивши про це користувача.
Подія submit відбудеться, якщо від обробника подій onSubmit не повертається значення false. Будь-яке інше значення (true або ще що-небудь) приведе до генерації цієї події. Наприклад, припустимо, що перед відправкою форми на сервер необхідно відобразити просте повідомлення для користувача з проханням підтвердити заповнення форми замовлення капелюха Kakata. Форма в HTML визначається таким чином:
<form action="process.cgi" method="POST"
onSubmit="return confirmOrder () ">
Метод confirmOrder(), використовуваний в обробнику подій onSubmit форми, оголошується в розділі <head> файлу:
//обробник подій onSubmit
function confirmOrder() {
return confirm('Are you certain you wish to order the Kakata hat?');
При включенні методу confirmOrder() він відображає діалогове вікно Confirm з кнопками "ОК" і "Cancel". Якщо користувач натискає на "ОК", діалогове вікно закривається і в обробник подій onSubmit повертається значення true. Якщо користувач натискає на "Cancel", повертається false. Оператор return в обробнику подій onSubmit досліджує вхідне значення і визначає, чи потрібно продовжувати обробку форми.
Оператор return в призначенні обробника подій необхідний для коректної роботи коди. Привласнення обробникові подій onSubmit = "confirmOrder()" запускає обробку форми незалежно від поверненого з діалогового вікна значення.
Обробник подій onSubmit — те ж саме, що і обробник подій onCIick об'єкту Submit. Обидва вони — події, які можна використовувати, щоб захопити форму перш, ніж вона буде оброблена. Як показано на мал. 14.3, обробник подій onCIick об'єкту Submit був викликаний до виклику обробника onSubmit форми.
Обробник подій onSubmit — ідеальне місце для розміщення перевірки правильності даних форми до її відправки на сервер.