Нові події
Розглянемо модель подій 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 неможливо визначити тегом. Але зробимо такі два зауваження:
У мові 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 | Рядок тексту, що вказує тип події |
| which | ASCII-величина натиснутої клавіші або номер клавиші миші |
| 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>