35 Объектная модель броузера. Объект event.

Было сказано, что используя JavaScript, можно перейти к технологиям динамического HTML. Для того чтобы изменять уже нарисованный браузером экран или создавать новые окна, нужно проникнуть в иерархию объектов браузера, получить доступ к его объектам. JavaScript предоставляет такую возможность. В чем суть динамического HTML-программирования? Браузер не только показывает образы тегов на экране компьютера. Браузер для каждого тега строит объект, наделяя его соответственными свойствами и методами. Все эти объекты помещаются в стройную иерархию, которая называется объектной моделью браузера. Доступ к объектной модели можно выполнить на JavaScript. Это дает следующие преимущества: браузер постоянно следит за своей объектной моделью; если в ней что-то меняется, это изменение сразу отображается на экране. Вот в этом и есть суть программирования динамики на гипертекстовой странице.

С программистской точки зрения браузер представляет собой следующую иерархию объектов:

Рисунок 4.1

В этой иерархии объекты, построенные для тегов документа, браузер включает в состав объекта document.

4.6.4 Объект event

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

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

Таблица 4.14– Свойства объекта

свойство	значение
srcElement	Позволяет узнать источник события. Это свойство является объектом и само содержит огромное число свойств, описывающих источник, на котором произошло событие. Например: srcElement.tagName -- имя тега srcElement.type -- значение атрибута type
type	Строка, содержащая тип события. <FORM> <INPUT type="button" value="type" onclick="alert(event.type)"> </FORM>
clientX clientY	Координаты события относительно начала окна, в котором браузер показывает документ.
screenX screenY	Координаты события относительно начала экрана монитора. <IMG src=pic/explorer.gif width=125 height=82 border=1 alt=Испытатель onClick="alert(event.screenX+','+event.screenY)">
offsetX offsetY	Координаты события относительно тега, на котором произошло событие.
x y	Координаты события относительно начала документа в окне, в котором браузер показывает документ. Начало документа может быть существенно "выше" верхней границы окна и "левее" его левой границы, если работают линейки протяжки.
button	Число, указывающее нажатую кнопку мыши. <FORM> <INPUT type="button" value="button" onMouseDown="alert(event.button)"> </FORM>
keyCode	Код нажатой клавиши.
altKey ctrlKey shiftKey	Код нажатой клавиши. <FORM> <INPUT type=button value="Спецклавиши" onKeyDown="this.form.Alt.value=event.altKey; this.form.Ctrl.value=event.ctrlKey; this.form.Shift.value=event.shiftKey;" onKeyUp ="this.form.Alt.value=''; this.form.Ctrl.value=''; this.form.Shift.value='';"> Alt<INPUT name=Alt type=text value="" size=7> Ctrl<INPUT name=Ctrl type=text value="" size=7> Shift<INPUT name=Shift type=text value="" size=7> </FORM>
returnValue IE4	Позволяет запретить или разрешить действие, предписанное элементу. <A href="event01.htm" onClick="event.returnValue=confirm('Перейти?')" >Переход на другой документ</A>