5. Понятття обробника подій
Кожна подію JavaScript має відповідний обробник подій (event handler),який призначений для автоматичної відповіді на подію, що відбувається. При роботі з подією до нього не додають код і не змінюють його безпосередньо, а, швидше, управляють обробником події.
Враховуючи керований подіями характер JavaScript, можна стверджувати, що тверде розуміння вбудованих подій — ключ до максимального збільшення його потужності.
6. Подія onChange
Як згадувалося у зв'язку з подією submit, якщо прикладні програми JavaScript мають справу з даними, зазвичай виникає необхідність в попередній обробці даних, введених користувачем, щоб уникнути проблем перевірки допустимості при відправці даних серверу. Тоді як submit служить для перевірки відразу всіх полів форми, подія change зазвичай найбільш важлива для перевірки допустимості на рівні кожного поля форми. Подія change відбувається, коли змінюється значення об'єктів поля і коли само поле виходить з фокусу.
Для вирішення такого роду завдання використовується обробник подій onChange для виконання JavaScript-кода або виклику функції для обробки події. Припустимо, що необхідно додати базову підпрограму перевірки допустимості даних у форму введення даних для замовлення капелюха Kakata. Скажімо, потрібна гарантія того, що вміст поля "State" записаний буквами верхнього регістра. Об'єкт Text визначається таким чином:
<input type=text size=3 maxlength=2 name="State"
onChange="convertToUppercase (this) ">
Метод convertToUppercase() перетворює значення поля "State" до верхнього регістра, використовуючи метод toUpperCase() рядки:
function convertToUppercase (fieldObject) (
fieldObject. value = fieldObject. value. toUpperCase ( )
7. Отримання фокусу (onFocus)
Подія focus викликається, коли об'єкт поля отримує фокус, тобто коли користувач переходить до об'єкту з використанням клавіші "Tab" або за допомогою клацання миші на об'єкті, або коли викликається метод focus об'єкту. У кожен момент часу фокус може мати тільки один об'єкт. Обробник подій OnFocus повинен розміщуватися усередині дескрипторів <body> об'єктів Window, Frame або Frameset.
Обробник подій onFocus в цих об'єкту може відповідати за перемикання дії. Наприклад, він може розширювати стандартну поведінку об'єктів Text у формі. При переході до об'єкту Text курсор з'являється за умовчанням. Проте, в багатьох середовищах (наприклад, в Windows), якщо поле вже має значення, то при установці фокусу на об'єкт вміст поля виділяється. Для отримання такої поведінки (див. лістинг 14.1) потрібно буде додати обробники подій onFocus кожному з об'єктів Text і Textarea:
Використання події onFocus для полів форми.
<pre> First Name: <input type=text size=20 maxlength=20
name="FirstName"
onFocus="selectContents(this) ">
Last Name: <input type=text size=20 maxlength=20 name="LastName"
onFocus="selectContents(this) ">
Title: <input type=text size=30 maxlength=256 name="Title"
onFocus="selectContents(this) ">
Company: <input type=text size=30 maxlength=256 name="Company"
onFocus="selectContents(this) ">
Street Address: <input type=text size=30 maxlength=256
Використання DOM. Частина III
name="StreetAddr" onFocus="selectContents(this) ">
City: <input type=text size=30 raaxlength=256 name="City"
onFocus="selectContents(this) ">
State: <input type=text size=3 maxlength=2 name="State"
onFocus="selectContents(this)" onChange="convertToUppercase(this) ">
Zip Code: <input type=text size=30 maxlength=10 name="ZipCode"
onFocus="selectContents(this) ">
Telephone: <input type=text size=12 maxlength=12 name="Phone"
onFoous="selectContents(this) ">
FAX: <input type=text size=12 maxlength=12 name="FAX"
onFocus="selectContents(this) ">
E-mail: <input type=text size=30 maxlength=256 name="Email"
onFocus="selectContents(this) ">
URL: <input type=text size=30 max1ength=256 name="URL"
onFocus="selectContents (this) "X/pre>
<textarea name="worthyBox" rows=3 cols=49 onFocus="selectContents(this)
">
</textarea>
Хоча можна написати окремі обробники подій для кожного з полів, це буде нераціональним підходом, якщо тільки процеси не виявляються абсолютно разными. Замість цього в методі se!ectContents() користуються перевагою ключового слова this для посилання на зухвалий об'єкт. Приведена нижче функція тоді використовуватиметься як глобальна для всіх об'єктів:
function selectContents (fieldObject) {
FieldObject.select();
}
Коли один з об'єктів Text або Textarea викликає метод selectContents, метод використовує параметр fieldObject як посилання на зухвалий об'єкт. Потім метод select() здійснює вибір інформації в області введення вказаного об'єкту.
Подія onBlur
Подія blur (протилежність події focus) викликається, коли об'єкт втрачає фокус.
Обробник подій OnBlur повинен поміщатися в дескриптор <body> об'єктів Window, Frame або Frameset.
Наприклад, припустимо, що для форми введення даних потрібна гарантія, що користувач не залишив порожнім об'єкт EmailText. Таку перевірку можна додати в обробник подій onBlur даного об'єкту. Оскільки вона впливає на одне поле форми, можна додати JavaScript-код тільки до визначення об'єкту Text:
<input type=text size=30 maxlength=256 name="Email"
onFocus="selectContents(this)" onBlur="if
(this.value == ' ' ) {
alert('You must enter something. ' );
this.focus() ;)">
Якщо користувач спробує прибрати фокус з об'єкту без введення тексту в дане поле, сигнальне діалогове вікно повідомить про неприпустимість. Наступна команда повертає фокус до об'єкту EmailText. Без цієї команди курсор перейшов би до наступного поля. Нескладно відмітити, що onChange і onBlur— дуже схожі обробники подій. Виникає питання про те, коли потрібно використовувати один, а коли інший. OnChange більше підходить для перевірки або аналізу вмісту об'єкту і володіє перевагою в тому, що не викликається при зміні значення користувачем. З іншого боку, для обов'язкових полів краще використовувати onBlur.
Важливо зрозуміти правильний порядок проходження обробників подій onChange, onBlur і onFocus. Як показано на мал. 14.4, onFocus відбувається при вході в полі. При виході з нього викликається onChange, потім onBlur і, нарешті, обробник onFocus наступного вхідного об'єкту. Майте на увазі, що код, який додається (наприклад, в обробник подій onChange), може впливати на обробник подій onBlur того ж самого об'єкту. Іншими словами, використовувати ці три події слід з певною обережністю.