2. Способи зв'язування подій

Під зв'язуванням подій розуміється встановлення зв'язку між функцією-обробником події і об'єктом, до якого відноситься функція.

5.2.1 Введення подій в якості атрибутів.

Всі стандартні події, перераховані вище, підтримуються HTML і можуть бути вставлені в якості атрибутів в елементи документа. Використання подій як атрибутів дозволяє встановлювати безпосередній зв'язок між елементом і його поведінкою.

Для прикладу встановимо зв'язок між посиланням в документі і подією onmouseover (наведенням вказівника миші на посилання). Визначимо обробник події, який при наведенні на посилання буде виводити повідомлення «Ви вказали на посилання»:

<А HREF= "http://testhtm.com/"

onmouseover="alert('Ви вказали на посилання');">

З цим посиланням пов'язана подія</А>

У цьому записі текст повідомлення виділено одинарними лапками, оскільки сам обробник події укладений у подвійні лапки. Можна записувати лапки і навпаки: зовні одинарні, а всередині –подвійні.

Як зазначалося, події можуть бути пов'язані з будь-яким елементом документа HTML. Перевіримо, що це дійсно так на прикладі проходження покажчика через область заголовка:

<HTML>

<HEAD>

<TITLE>Приклад атрибутів подій</TITLE>

</HEAD> <BODY>

<Н1 onmouseover=" alert ('Ви вказали на заголовок');"

onmouseout="alert('Ви прибрали покажчик з заголовка');">

Це заголовок</Н1> </BODY> </HTML>

При наведенні покажчика миші на заголовок з'являється відповідне повідомлення про це. Якщо у вікні повідомлення натиснути кнопку ОК на екрані з'явиться наступне повідомлення про те, що покажчик прибраний з заголовка.

В оброблювачі подій, можна використати декілька операторів, розділивши їх крапкою з комою, наприклад:

<INPUT type=button value="Натисни мене" onclick="alert('Прийміть вітання'); document.write('З днем народження, Пух!')">

Кнопка спочатку виведе вікно повідомлення, а потім з'явиться текст у вікні документа. Таким чином, події легко зв'язуються з елементами HTML допомогою атрибутів. Але такий зв'язок має один недолік: список пов'язуючих подій обмежений набором стандартних подій HTML. Якщо в сторінку впроваджено довільний об'єкт, то не всі його події можуть бути реалізовані через атрибути.

5.2.2 Обробники подій як функції.

У прикладах попереднього пункту всередині тегів HTML використані обробники подій alert (), document.write (). Обробники виявляються доступними не з JavaScript-сценаріїв (як годиться елементам JavaScript), а з тегів HTML.

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

<HTML> <HEAD>

<TITLE>Приклад обробника подій миші</TITLE> <SCRIPT>

function price() {

alert ("Ціна порції $1");

alert("Довго думаєте! Ціна зросла до $2");

alert("Втім, як би ви швидко не відповідали, вам доведеться заплатити $3 ! ");

}

</SCRIPT> </HEAD> <BODY>

<Н2>Зробіть замовлення</Н2>

<А HREF="minog.html" onmouseover="price();">Міноги</А> </BODY> </HTML>

При наведенні покажчика миші на посилання «Міноги» обробник викликає функцію price(). Ця функція містить кілька операторів, які послідовно виводять на екран повідомлення, що залучають користувача до неминучього діалогу. Зверніть увагу, визначення функції обробника дано в контейнері <HEAD> документа HTML, і цьому є свої причини .

Інший приклад функції - обробника події – запрошення на сайт.

<HTML>

<HEAD>

<ТITLEЕ>Вхід в ресторан</TITLE>

<SCRIPT LANGUAGE="JavaScript"> function hellow()

{

greet.value="Ласкаво просимо на наш сайт!";

}

</SCRIPT>

</HEAD>

<BODY>

<CENTER>

<Н1>Кращий в світі сайт!</Н1>

<INPUT type=text name="greet" size=40>

<BR><BR>

<INPUT type=button value="Тук-Тук..." onclick="hellow() ">

</CENTER> </BODY> </HTML>

На цій сторінці є кнопка, з якою пов'язано подія onclick. При натисканні на кнопку викликається функція hellow (), виводить у поле greet текст привітання.