Події JavaScript

Одна з найважливіших функцій JavaScript складається саме в реакції на різні дії користувача, будь те натискання на кнопку, чи гіперпосилання просте наведення мишки на який-небудь об'єкт. Усе, що користувач може робити на сторінці, називається подією, як і все, що автоматично відбувається на сторінці в браузері (чи в системі). Наприклад, завантаження сторінки — подія. Вивантаження сторінки - це, зрозуміло, теж подія.

Щоб навчитися обробляти ці події, потрібно зрозуміти, як створюються оброблювачі подій для конкретних елементів XHTML. У загальному випадку формат наступний:

Існує визначений набір елементів HTML, що мають підтримку атрибутів, зв'язаних з оброблювачами подій. Є, наприклад, оброблювачі, спеціально призначені для роботи з елементом <body> і що дозволяють визначати якісь автоматичні дії при завантаженні сторінки в браузері.

Елементи <form> мають безліч оброблювачів подій. Ми розглянемо приклад, що дозволяє по натисканню кнопки підтверджувати не форму цілком, а тільки дані, що передаються у функцію JavaScript:

<h1>Обробка введених даних</h1>

<form>

Уведіть число: <input type="text" name="userEntry" size="4" /> <br />

Результат обробки: <input type="text" name="result" size="5" /> <br />

</form>

Що робить цей уривок коду? Просить користувача ввести число в поле, розташоване на початку форми. Після цього йому потрібно натиснути кнопку «Розрахунок». При цьому буде запущений оброблювач події onclick. У ньому відбувається виклик деякої функції за назвою compute. Їй передається вказівник на значення, яким є об'єкт <input> з іменем userEntry. З нього функція витягне дані, обробить їх і поверне результат, привласнивши його змінній result. Ця змінна виводиться в текстовому полі на формі. Саме для цього друге текстове поле має те ж значення атрибута name, що і змінна, що зберігає потрібну інформацію.

Типи оброблювачів подій

Події, що відносяться в значній мірі до форм, що представляють собою атрибути скриптів, у яких у той же час відсутні формальні вимоги елемента <script>, називаються внутрішніми. Проте вони можуть працювати не тільки з елементами <form>. Деякі події бувають зв'язані з якимись визначеними елементами HTML, а інші — з цілою групою елементів. І ті й інші представлені в таблиці.

Оброблювач	Подія
onfocus	Заповнення (одержання фокуса) елемента форми (уведення даних, натискання за допомогою клавіатури чи миші). Елементи <input>, <select>, <textarea> і <button>, а також деякі інші: <а>, <label>
onblur	«Вихід» з елементів (втрата фокуса), перерахованих у попередньому опису події, за допомогою миші чи клавіатури
onclick	Користувач клацає на елементі
ondbclick	Подвійний щиглик
onchange	Зміна значення і вихід з елемента форми (тільки для <input>, <select> і <textarea>)
onkeypressed	Натискання клавіші, коли елемент у фокусі (тобто обраний)
onkeydown	Утримання клавіші, коли елемент у фокусі
onkeyup	Відпускання клавіші, коли елемент у фокусі
onload	Завантаження сторінки (використовуються тільки з <body> і <frameset>)
onunload	Вивантаження сторінки (використовуються тільки з <body> і <frameset>)
onmouseover	Наведення покажчика миші на елемент
onmousedown	Натискання кнопки миші, коли її покажчик знаходиться на елементі
onmouseup	Відпускання кнопки миші, коли її покажчик знаходиться на елементі
onmousemove	Переміщення миші, коли її покажчик знаходиться на елементі
onmouseout	Переміщення миші, зв'язане з відходом з елемента
onselect	Вибір поля <input> чи <textarea>
onreset	Очищення форми (використовуються тільки з елементом <form>)
onsubmit	Підтвердження форми (використовується тільки з елементом <form>)

Створення оброблювача подій зводиться до додавання атрибутів до того елемента, з яким ці події можуть відбуватися. Цей атрибут буде носити одну з назв, перерахованих у таблиці. Після знака рівності в лапках можна написати або код скрипта, або виклик функції. Розглянемо приклад, у якому викликається убудована функція:

У цьому прикладі показано, що в JavaScript можна використовувати як одинарні, так і подвійні лапки. Думаю, зрозуміло, чому і навіщо. Якщо в приведеному прикладі скрізь використовувати однакові лапки, то "alert" закриється занадто швидко.

Отже, одним зі способів відреагувати на користувальницьке введення є показ якого-небудь повідомлення. Повідомлення типу alert схоже на діалогове вікно, різниця складається тільки в тому, що замість двох кнопок на ньому розташована одна. Це називається «вікном попереджувальних повідомлень». Отож, це вікно являє приклад прямої взаємодії з користувачем, причому часто головне вікно браузера блокується доти, поки воно не буде закрито.

Крім убудованих функцій типу alert() можна, зрозуміло, викликати і власні:

У цьому прикладі викликається функція checkPhone(), їй передається значення, що зберігається в полі введення <input> з ім'ям phoneNumber. Як саме передається? Питання гарне, оскільки насправді передається не саме значення, а покажчик на нього. Причому не простий, а службовий покажчик this, мова про який піде далі.

<<< < Предыдущая 12 / 42 3 4 > Следующая >>>