Гостевая
Форум
Разделы
Главная страница
Js скрипты
Php скрипты
Html шаблоны
Книги по Web дизайну
Статьи


Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

Сценарий и обработка событий в JavaScript

Источник: realcoding.net

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



Похожие статьи:
- Простая поисковая система на Perl
- Текстовая обработка в языке Python. Подсказки для начинающих.
- Windows CGI интерфейс
- Пример универсального скрипта для обработки HTML-форм
- Прозрачность в CSS
- Аудит в XML-формате
- Скрипт показывает посетителю сколько раз он посетил страницу
- Модульное строение страницы
- Что видят поисковые системы при заходе на сайт?
- Реалити Шоу Создания Веб-Сайта
- Защита web-сервисов от спама
- Web2.0 Layout
- Автоматический редирект (Auto Redirect) на PHP


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
[0.002]