Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Институт / FI-12 / 15 / Lab_Int_15.doc
Скачиваний:
3
Добавлен:
22.03.2015
Размер:
74.75 Кб
Скачать

Події JavaScript

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

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

<element оброблювач ="код JavaScript чи виклик функції"> </element>

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

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

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

<form>

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

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

<input type="button" value="Розрахунок" onclick="result.value = compute(userEntry)" />

</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>)

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

<body onunload="alert('Спасибі за візит! Приходите ще!')">

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

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

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

<input type="text" name="phoneNumber" onchange="checkPhone (this.value)" />

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