Веб-инструмент
Веб-мастерская
Сообщения о событии формируются в виде объекта – контейнера для хранения информации. Как только объект события создан, браузер присваивает значения его свойствам. Например, объект соответствующий щелчку мышью, содержит координаты указателя мыши, а так же сведения о том, какя кнопка была нажата. Кроме того, объект события в одном из своих свойств содержит ссылку на элемент, с которым связано данное событие (например, на кнопку, изображение, поле ввода и т. п.).
Объект события хранится в памяти столько времени, сколько необходимо сценарию для его обработки. Пока выполняется обработчик события, объект события вместе со своими свойствами доступен сценарию, находящемуся в памяти браузера. Как только обработчик события завершит работу, объект события становится пустым (возвращается в исходное состояние).
В любой момент времени существует не более одного объекта события. Все инициированные события заносятся операционной системой в буфер и выполняются последовательно в том порядке, в каком они туда попали.
В объектной модели имеется объект event, являющийся подобъектом объекта окна window. Он содержит информацию о том, какое событие произошло, какой элемент должен на него реагировать, и ряд других характеристик. Объект event можно использовать в сценариях для документов с большим количеством интерактивных элементов, для выяснения причин неправильного отображения веб-страниц. Далее мы рассмотрим некоторые наиболее часто используемые свойства объекта event.
В IE версии 4.0 и старше среди прочих часто оказываются полезными свойства button и srcElement.
Свойство button возвращает целочисленное значение, указывающее, какая кнопка или кнопки мыши были нажаты.
Свойство srcElement возвращает ссылку на объект элемента HTML-документа, который инициировал событие. При получении такой ссылки можно узнать или изменить значения свойств этого объекта и применить к нему любой из его методов.
Приведенный ниже HTML-код формирует документ, содержащий две кнопки. Сценарий обрабатывает событие onclick - щелчок мышью. Он привязан к элементу, заданному тегом <body>. Щелкнуть можно на любой кнопке, а также на незанятом месте окна браузера. В любом случае событие onclick будет обработано сценарием (функцией changetext()), поскольку кнопки заданы внутри тега <body>. Сценарий заменит текст, который находится внутри тега элемента, инициировавшего событие. Какой именно элемент инициировал событие, определяется с помощью свойства srcElement, а замена текста осуществляется посредством свойства innerText. Об этом свойстве мы еще поговорим отдельно. Обратите внимание, что результат зависит от того, где находился указатель мыши в момент щелчка.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Cвойства события onclick</title>
</head>
<body onclick="changetext()">
<button>Первая кнопка</button>
<button>Вторая кнопка</button>
</body>
<script language="JavaScript">
function changetext(){
x=window.event.srcElement
x.innerHTML="Уже щелкнули"
}
</script>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Чтобы на щелчок реагировали только кнопки приведенные выше, код необходимо поправить.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Cвойства события onclick</title>
</head>
<body >
<button onclick="changetext()">Первая кнопка</button>
<button onclick="changetext()">Вторая кнопка</button>
</body>
<script language="JavaScript">
function changetext(){
x=window.event.srcElement
x.innerHTML="Уже щелкнули"
}
</script>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Объект event имеет несколько свойств, содержащих координаты в пикселах указателя мыши в момент возникновения события, связанного с мышью. Многообразие типов этих координат обусловлено различиями в начале их отсчета. Рассмотрим эти свойства.
Чтобы лучше разобраться в этих свойствах, создадим тестовый HTML-документ, как показано ниже, и поэкспериментируем с ним, щелкая мышью в различных точках . Этот документ содержит два контейнера, созданных с помощью позиционированных различным образом тегов <div>. Первый контейнер позиционирован абсолютно, а второй, вложенный в него, — относительно. Сценарий определяет значения координат различных типов и отображает их в диалоговом окне.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование свойства объекта event</title>
</head>
<body id="mybody">
<h2>Свойства событий</h2>
<div id="div1" style="position:absolute; left:100; top:100; width:300; height:100; background-color:#0000FF">Координаты щелчка
<div id="div2" style="position:relative; left:100; top:100; width:300; height:100; background-color: yellow">Это здесь
</div>
</div>
</body>
<script language="JavaScript">
function document.onclick(){
var e=window.event //ссылка на объект event
var str="ID= "+ e.srcElement.id+
"\n screenX="+e.screenX+ ", screenY="+e.screenY +
"\n clientX="+e.clientX+",clientY="+e.clientY+
"\n offsetX="+ e.offsetX+",offsetY="+e.offsetY+
"\n offsetX="+ e.offsetX+",offsetY="+e.offsetY+
"\n x=" +e.x +", y="+e.y
alert(str)
}
</script>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Нам требовалось, чтобы на щелчок реагировал любой объект документа, поэтому мы не стали привязывать обработчик события индивидуально ко всем элементам, а вместо этого назвали функцию-обработчик составным именем document. onctick().
Обратите внимание на использование свойства srcElement для получения значения id элемента, инициировавшего (или, как еще говорят, получившего) событие.
У объекта event имеется изменяемое свойство returnValue (возвращаемое значение). С его помощью можно отменять действия, принятые по умолчанию. Для этого достаточно присвоить ему значение false. Например, щелчок на ссылке по умолчанию означает переход по указанному адресу. Однако вы можете отменить это действие или запросить у пользователя подтверждение перехода.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подтверждение перехода по ссылке</title>
</head>
<body>
<a id="myfred" href="stage.html">Переход на новую страницу</a>
</body>
<script language="JavaScript">
function myfred.onclick(){
a=confirm("Вы действительно хотите перейти на новую страницу?")
if(!a)
window.event.returnValue=false
}
</script>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Здесь метод выводит диалоговое окно. Если пользователь не подтвердил
переход, то confirm() возвращает false, а свойству returnValue тоже присваивается false. В результате переход по ссылке не произойдет.
Нередко требуется разместить в документе элемент, который внешне выглядит, как обычная ссылка (при наведении указателя мыши его вид изменяется), но щелчок должен приводить не к переходу на другой документ, а просто к выполнению некоторого сценария. Этого можно добиться несколькими способами. Один из них основан на использовании свойства returnValue:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование свойства returnValue</title>
</head>
<body>
<a id="myfred" href="stage.html">Щелкни здесь</a>
</body>
<script language="JavaScript">
function myfred.onclick(){
alert("Был щелчок на ссылке")
window.event.returnValue=false
}
</script>
</html>
Если бы мы не использовали оператор window.event.returnValue = false, то в HREF адресе перехода по ссылке после выполнения обработчика события открылось бы новое окно браузера с содержимым указанной страницы.
В окне веб-браузера это будет выглядеть ТАК.
Обсудить на форуме