10. Модель подій

Нові події
      Розглянемо модель подій JavaScript 1.2 (і вище). У JavaScript підтримано опрацювання таких подій:
Abort, Blur, Click, Change, DblClick, DragDrop, Error, Focus, KeyDown, KeyPress, KeyUp, Load, MouseDown, MouseMove, MouseOut, MouseOver, MouseUp, Move, Reset, Resize, Select, Submit, Unload.
      Розглянемо, наприклад, подію Resize. З її допомогою можна визначити, чи було змінено розмір вікна. Поданий далі скрипт показує, як це можна робити.

<html><head>
<script language="JavaScript">
window.onresize= message;
function message() { alert("Розмір вікна змінено!");
                   }
</script>
</head>
<body>
Будь-ласка, змініть розмір цього вікна.
</body></html>

Вказівкою window.onresize= message; задано процедуру опрацювання події: функцію message() буде викликано при кожній зміні вікна. Це ще один спосіб задавати опрацювання події. Його використано, бо об'єкт window неможливо визначити тегом. Але зробимо такі два зауваження:

Об'єкт Event

      У мові JavaScript, починаючи з версії 1.2, є об'єкт Event. Він містить властивості, що описують подію. Кожного разу, як трапляється будь-яка подія, об'єкт Event передається відповідній програмі опрацювання.
      У наступному прикладі виведено деяке зображення у чорній рамці. Клацніть над ним клавішею миші. З'явиться вікно повідомлення з вказанням координат точки, де у цей момент знаходився вказівник миші:

      Код скрипта має такий вигляд.
...
<style type="text/css">
#kozak{margin:5px 0; position:relative; height:200px width:200px}
</style>
...
<div id="kozak">
 <a href="#" onClick="alert('(x; y) = (' + event.x + '; ' + event.layery+')'); return false;">
  <img src="kozak.jpg">
 </a>
</div>

      Новим є те, що для створення вікна з повідомленням використано event.x і event.y — об'єкту Event. Усі команди розташовано у тезі <div>. Завдяки цьому отримано координати відносно даного логічного блоку. У даному випадку — відносно зображення. Інакше повідомляються координати відносно вікна проглядача. Вказівку return false; використано для того, щоб проглядач опрацював далі дане посилання)
      Об'єкт Event має такі властивості:

ВластивістьОпис
data Масив адрес URL залишених об'єктів при події dragdrop
modifiersРядок тексту, що задає ключі модифікатора — ALT_MASK, CONTROL_MASK, META_MASK або SHIFT_MASK
pagexГоризонтальне розташування курсора (в пикселях) відносно вікна проглядача
pageyВертикальне розташування курсора (в пикселях) відносно вікна проглядача
screenxГоризонтальне розташування курсора (в пикселях) відносно екрана
screenyВертикальне розташування курсора (в пикселях) відносно екрана
targetРядок тексту, що подає об'єкт, якому було послано подію
typeРядок тексту, що вказує тип події
whichASCII-величина натиснутої клавіші або номер клавиші миші
xГоризонтальне розташування курсора (в пикселях). Має синонім layerx
yВертикальне розташування курсора (в пикселях). Має синонім layery

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


<html>
<script language="JavaScript">
window.captureEvents(Event.CLICK);
window.onclick= handle;
function handle(e) { alert("Об'єкт window перехоплює цю подію!");
                     return true; // простежити посилання 
                   }
</script>
Клацніть по цьому < a href="test.htm">посиланню.
Вікно закриєте після повернення.
</html>

Тут не вказано програму опрацювання подій у тезі <a>. Замість цього записано

window.captureEvents(Event.CLICK);

для того, щоб перехопити подію Click об'єктом window. Зазвичай об'єект window не працює з подією Click. Але, перехопивши, можна її переадресувати в об'єкт window.
      Якщо Ви бажаєте перехопити кілька подій, їхні записи потрібно відділяти символами |. Наприклад,

window.captureEvents(Event.CLICK | Event.MOVE);

      В означенні функції handle(), що опрацьовує події, використано вказівку return true;. Це означає, що проглядач має опрацювати й саме посилання після того, як завершить виконання функції handle().
      Наступний скрипт показує, як можна реагувати на натискання клавіш клавіатури. Натисніть на довільну клавішу клавіатури й подивіться, як працює цей скрипт.

<html>
<script language="JavaScript">
window.captureEvents(Event.KEYPRESS);
window.onkeypress= pressed;
function pressed(e) { alert("Клавішу натиснуто! ASCII-величина: " + e.which);
                    }
</script>
</html>
[попереднє] [зміст]