ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Обработка событий

Обработка событий

Одним из главных, но далеко не единственным, назначений сценариев в HTML-документе является обработка событий, таких как щелчок кнопкой мыши на элементе документа, помещение указателя мыши на элемент, перемещение указателя с элемента, нажатие клавиши и т. п. Большинство тегов HTML имеют специальные атрибуты, определяющие события, на которые могут отреагировать соответствующие элементы. Список всех допустимых событий довольно обширен и рассчитан практически на все случаи жизни. События называются довольно просто, особенно если вы знаете английский язык. Например, щелчок левой кнопкой мыши - onclick; изменение в поле ввода данных — onchange; событие onmouseover происходит, когда указатель мыши помещается на элемент HTML-документа. Список событий мы рассмотрим позже. Значением таких атрибутов-событий в тегах HTML является строка, содержащая сценарий, выполняющий роль обработчика события. Например, следующий HTML-код определяет заголовок второго уровня, который реагирует на щелчок кнопкой мыши тем, что выполняет некоторую функцию myfunc():

<h2 onclick = "myfuns()">Щелкни здесь</h2>

Определение функции myfunc() должно находиться в одном из контейнеров <script>,либо в файле, который должен быть вставлен в HTML-код документа с помощью тега <script>.

Для одного и того же элемента можно определить несколько событий, на которые он будет реагировать. Другими словами, для одного и того же тега можно указать несколько атрибутов-событий. Имена этих атрибутов, как и других, можно писать в любом регистре. Порядок следования атрибутов не имеет значения. Итак, значением атрибута-события, как уже отмечалось, является код сценария, заключенный в кавычки. Этот сценарий называют также обработчиком события. В приведенном выше примере обработчиком события onclick является функция myfunc(). Если обработчик события содержит несколько выражений, то они разделяются точкой с запятой.

<h2 onclick = "var a = 5; a = a + myfunc () ">Щелкни здесь</h2>

Обычно обработчики событий оформляются в виде функций, определения которых помещают в контейнерный тег <script>.

Рассмотрим примеры оформления обработчика щелчка на заголовке, изображении кнопке.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Клиентские сценарии JavaScript</title>
<script language="JavaScript">
function mystrim(){
alert("Привет!")
}
</script>
</head>

<body>
<h2 onClick="alert('Привет!')">Моя веб-страница</h2>
<a href="../../index.php"><img src="../images/dom4.gif" width="157" height="144" border="0"onClick="mystrim()">Сайт о сайтах</a><br>
<br>
<form action="" method="get" name="" >
<p>
<input name="" type="text" size="40">
</p>
<p>
<input name="myname" type="button" value="старт" onClick="mystrim()">
Жми здесь
</p>
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В приведенном примере обработчик событий onClick задается как значение атрибута-события <h2 onClick="alert('Привет!')"> и функции mystrim(), которая определена в контейнере <script>. В результате щелчка по заголовку, рисунку и кнопке выводится окно с сообщением. Если сценарий обработки события небольшой, то лучше использовать первый вариант, в других случаях второй, то есть оформление обработчика в виде функции.

Теперь рассмотрим еще один способ оформления обработчиков событий. Прежде всего, отметим, что почти для всех тегов HTML можно помимо прочих указать еще один атрибут — ID (идентификатор). Этот атрибут принимает любые строковые значения, которые играют роль индивидуальных имен элементов в их объектном представлении. Если атрибут ID в теге используется, то для задания обработчика события можно не использовать атрибуты-события. Вместо этого в контейнере <SCRIPT> достаточно написать определение функции обработчика события, имя которой образуется по следующему шаблону:

значение_ID.событие()

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Клиентские сценарии JavaScript</title>
</head>

<body>
<h2 id="mystrim">Моя веб-страница</h2>
<script language="JavaScript">
function mystrim.onclick(){
alert("Привет!")
}
</script>

<a href="../../index.php"><img src="../images/dom4.gif" width="157" height="144" border="0" id="mystrim">Сайт о сайтах</a><br>
<br>


<form action="" method="get" name="" >
<p>
<input name="" type="text" size="40">
</p>
<p>
<input name="myname" type="button" value="старт" id="mystrim" >
Жми здесь
</p>
</form>
</body>
</html>

Обратите внимание на следующие два обстоятельства, важные только для рассмотренного выше способа оформления обработчиков событий:

  • Элемент HTML-документа должен быть загружен раньше, чем функция-обработчик события.
  • Составное имя функции-обработчика события содержит название события в нижнем регистре.

В окне веб-браузера это будет выглядеть ТАК.

Если требуется, чтобы сценарий обработал событие независимо от того, с каким элементом оно связано, то можно воспользоваться таким составным именем функции-обработчика:

function document. cобытие() { . . . }

Например:

function document.onclick() { . . . }

Приведенных выше способов обработки событий (привязки обработчиков к элементам) вполне достаточно для практических нужд разработки веб-сайтов и других приложений. Однако следует упомянуть еще об одном способе, который применим для IE версии 4.0 и старше. Он основан на использовании атрибутов FOR и EVENT в теге <SCRIPT>.

Атрибуту FOR присваивается ссылка на объект, который должен реагировать на событие, а атрибуту EVENT присваивается название события. В качестве ссылки на объект обычно используется значение идентификатора объекта, то есть значение атрибута ID.

Рассмотрим пример.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Клиентские сценарии JavaScript</title>
<script language="JavaScript" for="myname" event="onclick" >

alert("Привет!")

</script>
</head>
<body>
<h2 >Моя веб-страница</h2>


<a href="../../../index.php"><img src="../../../images/dom4.gif" width="157" height="144" border="0" >Сайт о сайтах</a><br>
<br>
<form action="" method="get" name="" >
<p>
<input name="" type="text" size="40">
</p>
<p>
<input name="myname" type="button" value="старт" >
Жми здесь
</p>
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Выражения в контейнере <SCRIPT> будут выполняться только при наступлении события, указанного в EVENT, которое связано с объектом, указанным в FOR. В приведенном выше примере при щелчке на кнопке (<BUTTON . . .>) будет выведено диалоговое окно с сообщением. Рассмотренный выше способ позволяет не использовать атрибуты-события и указания обработчиков событий в тегах элементов. Однако при этом код сценария оказывается привязанным только к одному элементу. Чтобы использовать этот же код для других элементов, придется повторить его в секциях сценария (контейнерах <SCRIPT>), отдельно для каждого элемента

.

В рассмотренных способах обработчики событий привязывались к специальным атрибутам тегов HTML – ID, атрибутам -событиям, FOR и EVENT. Сценарий-обработчик выполняется, если возникло событие, связанное с элементом, для которого был указан этот обработчик. Вместе с тем, возможно вызывать обработчик в сценарии просто как метод объекта. Он будет выполняться так же, как и при возникновении соответствующего события.

Рассмотрим пример.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Клиентские сценарии JavaScript</title>
</head>
<body>
<h2 >Моя веб-страница</h2>
<a href="../../index.php"><img src="../images/dom4.gif" width="157" height="144" border="0" >Сайт о сайтах</a><br>
<br>
<form action="" method="get" name="" >
<p>
<input name="" type="text" size="40">
</p>
<p>
<input name="myname" type="button" value="старт" onClick="mystrim()" >
<script language="JavaScript" >
document.all.myname.onclick() //вызов обработчика
function mystrim(){
alert("Привет!")
}
</script>
Жми здесь

</p>
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В данном примере сразу же после загрузки документа в браузер вызывается обработчик события onclick, связанный с кнопкой. Этот обработчик – функция mystrim(). Обратите внимание, что обработчик событий выполняется, несмотря на то, что щелчка не было.

Внимание. Выражение вызова метода onclick() должно записываться только строчными буквами.

Следует иметь ввиду, что рассмотренный выше способ использования обработчика как метода существенно отличается от эмуляции действия для события. Допустим, что имеется форма с несколькими полями для ввода данных, одно из которых имеет обработчик событий onfocus(активизация поля). Чтобы поле активировалось, необходимо щелкнуть по нему мышью или перейти к нему с помощью клавиатуры. При этом выполняется обработчик события onfocus. Даже если поле не активно, обработчик события onfocus все равно можно вызвать, но при этом поле не активируется:

document.имя_формы.имя_поля.onfocus()

Благодаря возможности использовать обработчик события в качестве метода объекта, допускается задавать обработчик в виде функции, имеющей название, совпадающее с названием события:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Клиентские сценарии JavaScript</title>
<script language="JavaScript" >
function onload (){
alert("Привет!")
}
</script>
</head>
<body onLoad="onload()">
<h2 >Моя веб-страница</h2>
<a href="../../index.php"><img src="../images/dom4.gif" width="157" height="144" border="0" >Сайт о сайтах</a><br>
<br>
<form action="" method="get" name="" >
<p>
<input name="" type="text" size="40">
</p>
<p>
<input name="myname" type="button" value="старт" >
Жми здесь
</p>
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.