В javascript (или jscript, версии javascript фирмы microsoft) есть две
особенности: первая - что в нем поддерживаются только функции, вторая -
что этот язык понятен для всех броузеров. Самый привычный способ
передачи события элементу - это объявление названия функции в теге
элемента. Заметим, что нам нужно записать не просто "myclickcode", а
"myclickcode()" для соответствия синтаксической конструкции javascript.
В html документе это будет выглядеть так:
<h2 onclick="myclickcode()">
Текст, реагирующий на событие
</h2>
...
<script language=javascript>
function myclickcode() {
alert('Ты щелкнул Текст!');
}
</script>
Это хорошо для работы с отдельными
элементами, а как поступить при необходимости обработки событий целым
документом? В этом случае указатели на обработчики событий можно
поместить в тег <body>:
<body onmousemove="mymousemovecode()" onclick="myclickcode()>
Кроме того, можно подключить код обработки внутри тега элемента. При этом используется такая конструкция языка jscript:
<h2 language=jscript onclick="alert('Ты щелкнул Текст!');">
Текст, реагирующий на событие
</h2>
Так как jscript является языком
броузера, определенным по умолчанию, можно опустить атрибут
"language=jscript", сделав конструкцию более компактной:
<h2 onclick="alert('Ты щелкнул Текст!');">
Текст, реагирующий на событие
</h2>
И, наконец, можно создать отдельные секции <script> для каждого события, которое нам нужно обработать:
<h2 id=myheading>Текст, реагирующий на событие</h2>
...
<script language=javascript for=myheading event=onclick>
alert('Ты щелкнул Текст!');
</script>
Обработка событий, связанных с окнами, в языке javascript.
Мы
рассмотрели, как размещать объявления об обработке событий, таких, как
onmousemove в теге документа <body> для обеспечения реакции на
событие, произошедшее на уровне объекта document. Другая ситуация -
обработка события на уроне window. В internet explorer можно поместить
такие инструкции в тег открытия <html>:
<html onmousemove="mymousemovecode()"
onclick="myclickcode()">
...
</html>
Существует еще один прием обозначения
обрабатывающей событие функции в строке с идентификатором элемента и
события. В этом случае название события и имя элемента разделяют
точкой. Но при этом надо иметь в виду, что эти методы не являются
общепринятыми для обработки событий. Просто они работают, потому что
сами функции заданы в свойствах объекта element:
<h2 id=myheading>Текст, реагирующий на событие</h2>
...
<script language=javascript>
function myheading.onclick() {
alert('Ты щелкнул Текст!');
}
</script>
Этим методом пользуются для обработки событий, связанных с основными объектами броузера - document и window:
<script language=javascript>
function window.onload() {
alert('Загрузка страницы завершена.');
}
</script>
Отмена действия события.
Некоторые
события, такие как onsubmit, позволяют управлять тем, как броузер
поведет себя в ответ на них, возвращая контрольное значение. Рассмотрим
пример с формой, содержащей единственное текстовое поле email, и кнопку
submit (Отправка):
<form id=myform onsubmit="return checkaddress()"
action="http://www.some-web.com/file.cgi">
<input type=text id=email>
<input type=submit>
</form>
<script language=javascript>
function checkaddress() {
straddress = document.forms["myform"].elements["email"].value;
if (straddress.indexof("@") != -1) // содержит символ "@"
return true
else
}
alert('Проверьте правильность e-mail адреса!');
return false
}
}
</script>
Здесь для поиска символа @ в строке,
введенной пользователем в форме, используется функция "indexof()". Если
в строке нет такого символа, функция возвратит значение -1. В этом
случае подразумевается, что это не может быть корректный e-mail. Об
этом выдается сообщение, и отправка отменяется передачей значения
false. Нами было использовано ключевое слово return в атрибуте элемента
onsubmit, так что результат возвращается в ту часть броузера, которая
занимается отправкой.
В приведенном примере видно, как
используется броузерная модель для получения текста из текстового поля.
Искомая строка является свойством value элемента email. Эта форма -
часть коллекции elements формы myform, хранящейся в коллекции forms
объекта document.
Вместо возвращения значения собственно
функцией мы можем отменить действие, по умолчанию назначенное для
данного события, с помощью свойства returnvalue объекта event. Мы
рассмотрим это в следующих выпусках.
|
Копирование материалов разрешено,