Часто вместе с событием передаются данные, связанные с этим событием,
например, при щелчке мышки по элементу Web-страницы передается указатель на
этот элемент. Для того, чтобы программа могла получить доступ к этим данным,
в JavaScript предусмотрен объект event, который
является свойством объекта window. Тогда данные,
которые передаются вместе с событием можно получить с помощью выражения window.event.свойство.
Приведем некоторые свойства объекта event:
- srcElement - возвращает ссылку на элемент (тэг) Web-страницы,
вызвавший наступление события;
- fromElement - возвращает ссылку на элемент Web-страницы, с
которого переместился курсор мышки при наступлении события Mouseover или
Mouseout;
- toElement - возвращает ссылку на элемент Web-страницы,
на который помещен курсор мышки;
- type - возвращает имя события;
- returnValue - задает, будет ли выполняться действие по
умолчанию (если true - будет, если false - нет);
- propertyValue - возвращает имя атрибута тэга или стиля
свойства элемента Web-страницы, значение которого изменилось;
- button - возвращает номер нажатой кнопки мышки:
- 0 - ничего не было нажато;
- 1 - нажата левая кнопка;
- 2 - нажата правая кнопка;
- 3 - нажаты одновременно левая и правая кнопки;
- 4 - нажата средняя кнопка;
- 5 - нажаты одновременно левая и средняя кнопки;
- 6 - нажаты одновременно правая и средняя кнопки;
- 7 - нажаты одновременно все кнопки.
Пример использования свойсва type и srcElement объекта event в JavaScript:
<HTML>
<HEAD>
<TITLE>Определение свойств объектов </TITLE>
<STYLE>P{color:#0000D0;font-size:8mm}</STYLE>
<SCRIPT>
function allTags()
{
tags="Web-страница содержит следующие тэги: ";
for (i=0; i<document.all.length; i++)
with (document.all.item(i)) // Метод item() не обязателен
{
tags+="\n"+i+" "+tagName+" "+id;
if (tagName!="BODY"&&tagName!="HTML")
tags+=" "+innerText;
if (tagName!="HTML") tags+=" "+parentElement.tagName;
}
alert(tags);
}
function showTagInfo()
{
with (event.srcElement)
{
window.status="Номер: "+sourceIndex+
" имя: "+tagName+
" цвет: " + currentStyle.color +
" размер: " + currentStyle.fontSize+
" жирность: "+currentStyle.fontWeight+
}
}
function changeTags()
{
tagsP=document.getElementsByTagName("P")
for(i=0;i<tagsP.length;i++)
{
size=parseInt(tagsP[i].currentStyle.fontSize);
tagsP[i].runtimeStyle.fontSize=size*1.25+"mm";
}
}
</SCRIPT>
</HEAD>
<BODY ID="bod" ALIGN=center
onLoad="allTags()"
onClick="showTagInfo()"
onDblclick="changeTags()">
<H1 ID="h1" ALIGN=center
STYLE="color:#FF00FF; font:12mm"> Заголовок </H1>
<P id="p1" STYLE="color:blue; font-size:4mm"> Текст
<FONT ID="f" COLOR=#C00000 SIZE=5> Еще текст
</FONT></P>
<P ID="p2"><B ID="bb"> Полужирный </B> текст </P>
</BODY>
</HTML>
Результат работы можна просмотреть здесь.