Події Таймери Шавурська Анна Ціль подій —

Події. Таймери Шавурська Анна

Ціль подій - взаємодія

Взаємодія між • DOM та модулями програми • Модулями програми між собою

Що таке подія? ? ?

Подія Це дія або виконання деяких умов, що є виявлені програмою.

• На подію можна підписатись використовуючи слухача (listener/handler), що виконується, коли виникає подія.

Observer pattern Поведінка - Java. Script Вигляд сторінки – HTML + CSS Слабка зв'язність

Простий приклад var button = document. get. Element. By. Id('my. Element'); button. onclick = function() { console. log(‘Hello world’); };

Обробник події Event listener (event handler) - Це функція, яка викликається тоді, коли виникає подія.

Event handler property • Ім'я обробника: on + назва події • Недоліки: – лише одна функція-обробник. • Переваги: – простий, – крос-браузерний.

add. Event. Listener() target. add. Event. Listener( type, // string - event name without on listener, // function use. Capture // boolean );

Приклад var el = document. get. Element. By. Id("outside"); el. add. Event. Listener("click", modify. Text, false );

Перевага – багато обробників var btn=document. get. Element. By. Id(“my. Btn”); btn. add. Event. Listener(“click”, function(){ alert(this. id); }, false); btn. add. Event. Listener(“click”, function(){ alert(“Hello world!”); }, false);

Видалення обробника події 1. btn. onclick = null; 2. target. remove. Event. Listener(type, listener, use. Capture);

Приклад var div = document. get. Element. By. Id('div'); var listener = function (event) { /* do something here */ }; div. add. Event. Listener('click', listener, false); div. remove. Event. Listener('click', listener, false);

Контекст виконання обробника • Функція-обробник виконується в контексті елемента, до якого прив'язаний обробник (this вказує на цей елемент).

Event Object Properties • • • event. bubbles event. cancel. Bubble event. cancelable event. current. Target event. default. Prevented event. Phase event. target event. time. Stamp event. type

Типи подій http: //www. w 3 schools. com/jsref/dom_obj_event. asp http: //www. w 3. org/TR/DOM-Level-3 -Events/#eventtypes • • Mouse Events, Keyboard Events, Frame/Object Events, Form Events

Device Events • orientationchange • devicemotion

Touch Events • • touchstart touchmove touchend touchcancel

Поширення події • Event flow: – Event Capturing – At target – Event Bubbling

Event bubbling

Event Capturing

Event flow

event. stop. Propagation(); • Зупиняє поширення події до наступних елементів. • Перериває потік події на бідь-якій фазі.

event. Prevent. Default() • Відміна стандартних дій браузера. • https: //developer. mozilla. org/en. US/docs/Web/API/event. prevent. Default

Створення подій var event = new Event('build'); elem. add. Event. Listener('build', function (e) {. . . }, false); elem. dispatch. Event(event);

Створення подій – застарілий варіант var event = document. create. Event('Event'); event. init. Event('build', true); document. add. Event. Listener('build', function (e) {}, false); Event. Target. document. dispatch. Event(event );

Таймери

set. Timeout() var timeout. ID = window. set. Timeout( func, delay, [param 1, param 2, . . . ] );

set. Interval() var interval. ID = window. set. Interval( func, delay [, param 1, param 2, . . . ] );

This в таймерах • Вказує на window • “Strict mode” - undefined

Як це все працює?

Java. Script - однопоточний, але асинхронний

Основний Потік

Основний потік • Модуль відображеня працює з одним потоком: в ньому виконується майже все, крім мережевих операцій. В Firefox і Safari це основний потік браузера, в Chrome – основний процес вкладки. • Основний потік браузера представляє собою цикл подій - нескінченний цикл, котрий підтримує робочі процеси. while (!m. Exiting) NS_Process. Next. Event(thread);

Черга

Завдання • Зверстати 3 вкладених блока. • Підписатись на клік кожного з блоків та вивести повідомлення про те, на якому блоці спрацювала подія. Зробити те саме, але для фази capturing. • Зробити так, щоб жодні кліки не доходили до всіх блоків. • При кліку на один з блоків створювати та посилати власну подію, в яку передавати інформацію про час події. Підписатись на неї та вивести передану інформацію. • З інтервалом 2 сек виводити на екран кількість виклику функції. • З інтервалом, що дорівнює наступному числу з ряду Фібоначі, виводити на екран це число.

Почитати • http: //www. html 5 rocks. com/ru/tutorials/inte rnals/howbrowserswork/