Поняття події. Об’єкт event в JavaScript.

Практически все JavaScript-приложения выполняют те или иные действия, откликаясь на различные события.

Событие - это сигнал от браузера о том, что что-то произошло.

Есть множество самых различных событий.

· DOM-события, которые инициируются элементами DOM. Например, событиеclick происходит при клике на элементе, а событие mouseover - когда указатель мыши появляется над элементом,

· События окна. Например событие resize - при изменении размера окна браузера,

· Другие события, например load, readystatechange. Они используются, скажем, в технологии AJAX.

Именно DOM-события связывают действия, происходящие в документе, с кодом JavaScript, тем самым обеспечивая динамический веб-интерфейс.

Для того, чтобы скрипт реагировал на событие - нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют "on+имя события", например:onclick.

Нужно сразу отметить, что JavaScript - однопоточный язык, поэтому обработчики всегда выпоняются последовательно и в общем потоке. Это значит, что при установке обработчиков двух событий, которые возникают на элементе одновременно, напримерmouseover (мышь появилась над элементом) и mousemove (мышь двигается над элементом), их обработчики будут выполнены последовательно.

Существует несколько способов назначать обработчик на конкретное событие элемента.

Обработчик события можно указать в виде inline-записи, прямо в атрибуте on событие.

Например, для обработки события click на кнопке input, можно назначить обработчик onclick вот так: <input id="b1" value="Нажми Меня" onclick="alert('Спасибо!');" type="button"/>

Самый близкий родственник описанного выше способа - установка функции-обработчика через свойство on событие соответствующего элемента. Этот способ тоже будет работать в любом браузере с поддержкой JavaScript.

Вот пример установки обработчика события click на элемент с id="myElement": document.getElementById('myElement').onclick = function() { alert('Спасибо') }<input id="myElement" type="button" value="Нажми меня"/>

 

Объект event всегда передается обработчику и содержит массу полезной информации о том где и какое событие произошло.

Из объекта event обработчик может узнать, на каком элементе оно произошло, каковы были координаты мыши (для событий, связанных с мышью), какая клавиша была нажата (для событий, связанных с клавиатурой), и извлечь другую полезную информацию.

Например, для события по клику мыши (onclick), свойство event.target(в IEevent.srcElement) содержит DOM-элемент, на котором этот клик произошел.

Примечательно, что на одно событие может реагировать не только тот элемент, на котором произошло событие, но и элементы над ним. Например если в элементе содержатся много дочерних HTML-тегов - не обязательно ставить обработчик на каждый, достаточно указать один обработчик на родителе и в нем ловить все события.

 

38. Об’єкт Image в JavaScript.
Розглянемо об'єкт Image. З його допомогою можна вносити зміни у графічні образи, присутні на web-сторінці. Таким чином можна навіть створити анімацію.

звертання до першого зображення таке: document.images[0]

Об'єкт Image має певні властивості, до яких можна звертатися мовою JavaScript. Наприклад, задати розміри, звернувшись до властивостей width i height. Наприклад, змінивши величину document.images[0].width, можна визначити ширину першого зображення на web-сторінці у пикселях.

Для зміни зображень на web-сторінці нам знадобиться атрибут src. Як і у випадку тегу <img>, атрибут src містить адресу поданого зображення. У мові JavaScript є можливість призначити нову адресу зображення, вже завантаженому у web-сторінку. В результаті зображення буде завантажено з нової адреси. Нове зображення завжди отримує той самий размір, що був у попереднього. І Ви не можете змінити розмір поля, у якому це зображення розташовано.
Розглянемо код:

<img src="1.png" name="myImage" width=60 height=40>

<form><input type=button value="Змініть зображення" onClick="document.myImage.src='2.png'"></form>

Тут першим рядком завантажено зображення 1.png, якому надано назву myImage. Наступний рядок дозволить змінити попереднє зображення 1.png на нове — 2.png — після натискання клавіші «Змініть зображення».

 

39. Управління зображеннями та роловерами засобами JavaScript. див 38

Роловер обычно состоят из нескольких состояний. Основные состояния: при наведенной мышке, при нажатии, после нажатия. Для каждого состояния требуется отдельная картинка. В таком случае меню получается довольно тяжелое, так как для каждой кнопки приходится грузить несколько изображений.

Струтктура меню очень простая. Ее мы вставляем в тело документа:

<div id="menu">
<a href="">Menu item 1</a>
<a href="">Item no. 2</a>
<a href="">Another (3)</a>
<a href="">Menu item 4</a>
<a href="">One more (5)</a>
</div>

 

Події об’єктів JavaScript.

Половина обработчиков поддерживаются практически всеми HTML-элементами (*). Некоторые события можно имитировать с помощью соответствующих методов. Ниже приводится список событий согласно спецификации HTML 4.0 и некоторые события, поддерживаемые MS IE. Трактовка браузеров может отличаться от стандарта и в плане применимости обработчика к тем или иным элементам

Обработчик события	Поддерживающие HTML-элементы	Описание	Метод имитации
onAbort	IMG	Прерывание загрузки изображения
onBlur	A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA	Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции	blur()
onChange	INPUT, SELECT, TEXTAREA	Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur	change()
onClick	* Практически все HTML-элементы	Одинарный щелчок (нажата и отпущена кнопка мыши)	click()
onDblClick	* Практически все HTML-элементы	Двойной щелчок
onError	IMG, WINDOW	Возникновение ошибки выполнения сценария
onFocus	A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA	Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции)	focus()
onKeyDown	* Практически все HTML-элементы	Нажата клавиша на клавиатуре
onKeyPress	* Практически все HTML-элементы	Нажата и отпущена клавиша на клавиатуре
onKeyUp	* Практически все HTML-элементы	Отпущена клавиша на клавиатуре
onLoad	BODY, FRAMESET	Закончена загрузка документа
onMouseDown	* Практически все HTML-элементы	Нажата кнопка мыши в пределах текущего элемента
onMouseMove	* Практически все HTML-элементы	Перемещение курсора мыши в пределах текущего элемента
onMouseOut	* Практически все HTML-элементы	Курсор мыши выведен за пределы текущего элемента
onMouseOver	* Практически все HTML-элементы	Курсор мыши наведен на текущий элемент
onMouseUp	* Практически все HTML-элементы	Отпущена кнопка мыши в пределах текущего элемента
onMove	WINDOW	Перемещение окна
onReset	FORM	Сброс данных формы (щелчок по кнопке <input type="reset">)	reset()
onResize	WINDOW	Изменение размеров окна
onSelect	INPUT, TEXTAREA	Выделение текста в текущем элементе
onSubmit	FORM	Отправка данных формы (щелчок по кнопке <input type="submit">)	submit()
onUnload	BODY, FRAMESET	Попытка закрытия окна браузера и выгрузки документа

* Практически все HTML-элементы: все, за исключением APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

 

Затримки і інтервали. Періодичний виклик функцій в JavaScript.

В JavaScript для періодичного виклику функції використовують функцію:

 

setInterval(пар_1, пар_2);

де пар_1 – назва ф-ії користувача, яку слід повторювати;

пар_2 – час повторення.

 

Приклад:

Function My_func ()

{

alert(“Пройшло 5 секунд”;)

}

 

var time = setInterval(My_func, 5000);

 

Функція буде спрацьовувати кожні 5с. Щоб інтервал був одноразовим слід використати метод clearInterval(timer);

 

Описання DOM.

Основним інструментом роботи і динамічних змін на сторінці є DOM (об'єктній моделі документа) - об'єктна модель, використовувана для XML / HTML-документів.

Згідно DOM-моделі, документ є ієрархією.

Кожен HTML-тег утворює окремий елемент-вузол, кожен фрагмент тексту - текстовий елемент, і т.п.

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

 

Приклад простого дерева DOM:

<html>

<head>

<title>Заголовок</title>

</head>

<body>

Документ

</body>

</html>