HTML события | Объекты в html

ОГЛАВЛЕНИЕ

1 Доступ к свойствам объектов на HTML на Web-странице с помощью языка JavaScript
2 Обработка событий на Web-странице
Пример 1

1 Доступ к свойствам объектов на HTML на Web-странице с помощью языка JavaScript

В соответствии с объектной моделью документа DOM (Document Object Model), которая поддерживается языком JavaScript, все тэги Web-страницы являются объектами и помещены в коллекцию (набор), которая называется document.all, с возможностью программного доступа к любому из них для определения или изменения их свойств.

Наиболее простым способом доступа к объекту на Web-странице является доступ по его идентификатору. В этом случае может применяться одна из трех форм:

• document.all("идентификатор").свойство;
• document.getElementById("идентификатор").свойство;
• идентификатор.свойство,

идентификатор - это идентификатор тэга, заданный с помощью параметра ID , например <P ID="txt">. Для тех тэгов, для которых допускается использование параметра NAME, например, таких как <IMG>, <A>, а также элементов тэга <FORM>, в качестве идентификатора вместо параметра ID можно использовать параметр NAME: <IMG NAME="img1" . . . >.

Третья форма доступа к тэгу является наиболее простой, ее поддерживает браузер Microsoft Internet Explorer, и мы в дальнейшем в основном будем использовать этот подход. К его недостаткам следует отнести то, что далеко не все браузеры поддерживают эту форму доступа. Если необходимо добиться того, чтобы Web-страница была правильно обработана любым браузером, лучше воспользоваться второй, более универсальной формой.

Необходимо обратить внимание на различие в двух вариантах обозначения имени тэга: в кавычках - "идентификатор" и без кавычек - идентификатор. Имя идентификатора тэга в кавычках имеет строковый тип и задает именно идентификатор тэга, тогда как имя идентификатора тэга без кавычек имеет тип объекта и задает сам тэг, как объект.

Использование всех трех способов доступа к тегам <H1> и <IMG> приведено в примере № 1.

Свойство - это или HTML-наименование параметра тэга, или наименование свойства CSS, заданного для этого тэга. В последнем случает используется следующее правило указания свойств CSS на языке JavaScript: если свойство CSS состоит из нескольких слов, записанных через дефис, то в обозначении свойства для JavaScript все знаки дефиса убираются, первое слово свойства пишется с прописной буквы, а второе слово и последующие слова свойства пишутся с заглавной буквы. Например, свойство CSS font-size на JavaScript будет выглядеть так: fontSize, а свойство CSS list-style-image:url(URL) так: listStyleImage="url(URL)".
Использование свойств CSS в JavaScript приведено в примере № 1.

2 Обработка событий в HTML на Web-странице

К событиям на Web-странице относятся как действия пользователя, связанные с работой с мышью и клавиатурой, так и действия браузера, связанные с загрузкой, выгрузкой Web-страниц и др.

JavaScript поддерживает следующие обработчики событий:

• onMouseover - вызывается по событию Mouseover : наведение указателя мыши на объект;
• onMouseout - вызывается по событию Mouseout: указатель мыши снимается с объекта:
• onMousemove - вызывается по событию Mousemove: указатель мыши помещается на объект или двигается по объекту;
• onClick - вызывается по событию Click: щелчок (нажатие левой клавиши мыши);
• onDblclick - вызывается по событию Dblclick: двойной щелчок;
• onContextmenu - вызывается по событию Contextmenu: нажатие правой клавиши мыши;
• onKeydown - вызывается по событию Keydown: нажатие клавиши клавиатуры;
• onKeypress - вызывается по событию Keypress: нажатие и удерживание клавиши клавиатуры;
• onKeyup - вызывается по событию Keyup: отжатие клавиши клавиатуры;
• onLoad - вызывается по событию Load: загрузка Web-страницы;
• onUnload - вызывается по событию Unload: выгрузка Web-страницы;
• onHelp - вызывается по событию Help: нажатие клавиши помощи F1;
• onFocus - вызывается по событию Focus: установка фокуса поля (при щелчке мыши по полю);
• onBlur - вызывается по событию Blur: снятие фокуса.

Для обработки события в языке JavaScript используется такая конструкция:
Обработчик события="действия по обработке события",
где Обработчик события - это один из перечисленных выше обработчиков событий; действия по обработке события - это или вызов функции, или встроенный фрагмент программы на JavaScript.
Эта конструкция помещается в тот тэг, параметры которого должны быть изменены при совершении события, связанного с работой мыши. Обработчики событий, связанных с нажатием клавиш клавиатуры или с работой браузера, помещаются в тэг <BODY>.
При обработке событий, касающихся клавиатуры, определить ASCII-код (точнее Unicode) нажатой или отжатой клавиши можно так:
event.keyCode.

Для определения самого символа используется следующий метод объекта String: String.fromCharCode(Unicode).
В примере № 1 показано применение двух функций - changeHeader() и restoreHeader().

Первая из них вызывается по наведению мыши на заголовок "ЗАГОЛОВОК ПАРАГРАФА" (тэг <H1 ID="hd"> со значением идентификатора, равным "hd") и изменяет некоторые его свойства: используя параметр HTML ALIGN выравнивает по центру экрана, используя свойство CSS - увеличивает в два раза размер, меняет цвет, жирность и наклон. Кроме того эта функция задает фон в виде рисунка, изменяя параметр BACKGROUND тэга <BODY>.

Вторая функция восстанавливает исходные свойства фона и заголовка при снятии с него указателя мыши.
Для того, чтобы сделать программу более компактной в функции restoreHeader() применяется оператор with.

Пример 1

<HTML>
<HEAD>
<TITLE> Изменение свойств объектов в HTML на Web-странице </TITLE>
<SCRIPT>
n=9;
function changeTag(hd) // Изменение свойств заголовка и рисунка
{
switch (hd) {
case head: {
bod.background="back.gif";
hd.align="center";
document.getElementById("head").style.color="#00F";
document.all("head").style.fontSize=2*n+"mm"; // 18 mm
hd.style.fontWeight="normal";
hd.style.fontStyle="italic";
break; }
case image: {
hd.width=300;
break; }
}
}
function restoreTag(hd) // Восстановление свойств заголовка и рисунка
{
bod.background="";
hd.align="left";
with (hd.style) {
color="black";
fontSize="9mm";
fontWeight="bold";
fontStyle="normal";
}
hd.width="50";
}
</SCRIPT>
</HEAD>
<BODY ID="bod">
<H1 ID="head" onMouseover="changeTag(head)"
onMouseout="restoreTag(head)"> ЗАГОЛОВОК ТЕКСТА </H1>
<IMG name="image" src="fish.gif"
onMouseover="changeTag(this)"
onMouseout="restoreTag(this)">
</BODY>
</HTML>