Главная » Полезные статьи » Язык JavaScript » Обработка событий в языке JavaScript
Распечатать статью

Обработка событий в языке 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. Мы рассмотрим это в следующих выпусках.

Источник:  internet-technologies.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи