Обработка событий в языке javascript
В 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. Мы рассмотрим это в следующих выпусках.
Постоянные ссылки
При копировании ссылка на TeaM RSN обязательна!
Оставить комментарий
Вы должны войти, чтобы оставить комментарий.