Самовчитель javascript, модель подій в javascript 1

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

function message () alert ( "The window has been resized!");
>

Будь ласка, поміняйте розмір цього вікна.

Однак Ви можете написати це і по іншому:

function message () alert ( 'Click event occured!');
>

Можна подумати, що друга альтернатива трохи складніше. Однак чому тоді саме її ми використовуємо в першому скрипті? Причина полягає в тому, що об'єкт window можна визначити через якийсь певний тег - тому нам і доводиться використовувати другий варіант.

Два важливих зауваження: По-перше, Вам не слід писати window.onResize - я маю на увазі, що Ви повинні писати все прописними буквами. По-друге, Ви не повинні ставити після повідомлення ніяких дужок. Якщо Ви напишете window.onresize = message (). то браузер інтерпретує message () як виклик функції. Однак в нашому випадку ми не хочемо безпосередньо викликати цю функцію - ми лише хочемо визначити обробник події.

Об'єкт Event.

До того ж я помістив всі команди в тег . Завдяки цьому ми отримуємо в повідомленні координати щодо даного шару, тобто в нашому випадку щодо самого зображення. В іншому ж випадку ми отримали б координати щодо вікна браузера. (Інструкція return false; використовується тут для того, щоб браузер обробляв далі дане посилання)

Об'єкт Event отримав наступні властивості (їх ми розглянемо в наступних прикладах):

Перехоплення події.

Щоб побачити, для чого це може стати в нагоді, давайте розглянемо наступний приклад:

function handle (e) alert ( "Об'єкт window перехоплює цю подію!");
return true; // тобто простежити посилання
>

Click on this link

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

Якщо тепер в тезі Ви задасте програму обробки події onClick, то зрозумієте, що дана програма при виникненні даної події викликана вже не буде. І це не дивно, оскільки об'єкт window перехоплює сигнал про подію ще до того, як він досягає об'єкта link. Якщо ж Ви визначите функцію handle () як

function handle (e) alert ( "The window object captured this event!");
window.routeEvent (e);
return true;
>

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

Крім того, Ви можете безпосередньо послати сигнал про подію будь-якого об'єкта. Для цього Ви можете скористатися методом handleEvent (). Це виглядає наступним чином:

function handle (e) document.links [1] .handleEvent (e);
>

Всі сигнали про події Click, надсилаються на обробку по другій посиланням - навіть якщо Ви зовсім і не клацнули ні по одній з посилань!

Наступний скрипт демонструє, як Ваш скрипт може реагувати на сигнали про натискання клавіш. Натисніть на будь-яку клавішу і подивіться, як працює цей скрипт.

function pressed (e) alert ( "Key pressed! ASCII-value:" + e.which);
>