Курс обучения JavaScript: События
|
Автор: Артемьев Сергей Игоревич ICQ: 438856621 email: _spin_@bk.ru |
JavaScript поддерживает отслеживание некоторых изменений и действий пользователя на странице. Каждое такое изменение или действие порождает событие, которое программист может перехватить и выполнить какие-то необходимые действия. Примеры событий - клик мыши на элементе страницы, получение фокуса ввода элементом формы, окончание загрузки или выгрузки страницы.
Список событий, доступных в каждом отдельном браузере обычно можно узнать на сайте компании-разработчика или в справочной документации. Список основных обработчиков определён стандартом W3C, но каждый разработчик браузера волен добавлять обработчики по своему желанию. Например, событие onAbort поддерживается IE, но не является стандартным и не поддерживается браузерами Netscape.
В первых версиях браузеров Web-программисты могли оперировать лишь с небольшими наборами событий для каждого типа отображаемых элементов, но в последних версиях можно назначить события практически любому элементу страницы.
Наиболее популярные и полезные события перечислены в таблице:
| События форм и элементов страницы | |
| onchange() | Элемент теряет форкус ввода, а содержимое элемента изменилось за время, пока элемент был в фокусе. |
| onselect() | Какая-то часть текста внутри элемента становится выделеной. |
| ousubmit() | В форме нажата кнопка "Отправить", но отправка формы на сервер ещё не производилась. |
| События мыши | |
| onclick() | Произведён клик кнопкой мыши на элементе управления. Событие возникает после того, как кнопка мыши была отпущена. |
| onmousedown() | Нажата кнопка мыши. |
| onmousemove() | Указатель мыши движется внутри области отображения элемента. |
| onmouseout() | Указатель мыши вышел из области отображения элемента. |
| oumouseover() | Указатель мыши находится внутри области отображения элемента. |
| onmouseup() | Отжата кнопка мыши. |
| События окна (объект window) | |
| onblur() | Элемент управления теряет фокус ввода, т.е. курсор переходит к другому элементу. |
| onfocus() | Отображаемый элемент получил фокуса ввода. Для текстовых полей это событие означает, что курсор уже находится в данном элементе. |
| onload() | Завершена загрузка страницы. |
| onunload() | Производится выход из документа (закрытие или перенаправление страницы на другой адрес). |
| События клавиатуры | |
| onkeydown() | Нажата кнопки на клавиатуре. |
| onkeypress() | Кнопка на клавиатуре нажата и не отпускается дольше, чем интервал повторения. Длительность интервала повторения является системным параметром и зависит от настроек операционной системы пользователя. |
| onkeyup() | Отпущена ранее нажатая кнопка. |
Наряду со стандартными событиями компания Microsoft в своих браузерах IE версии 5.5 и выше ввела большое количество собственных событий, например oncut(), oncopy(), onselectstart() и т.п. Но если вы хотите, чтобы ваши скрипты одинаково хорошо работали во всех браузерах - старайтесь используйте только стандартный набор событий.
Чтобы при возникновении события выполнить какие-то действия, необходимо предварительно указать обработчик этого события. Это можно сделать двумя путями: программно или непосредственно в HTML-коде.
Пример программного добавления собятия onload():
<head>
<script type="text/javascript" language="javascript">
function initVariables()
{
alert('документ загружен');
retun true;
}
window.onload = initVariables;
</script>
</head>
А эта версия примера имеет такой же функционал, как предыдущая, но обработчик события добавляется средствами HTML:
<head>
<script type="text/javascript" language="javascript">
function initVariables()
{
alert('документ загружен');
retun true;
}
</script>
</head>
<body onload="initVariables();">
</body>
Аналогичным образом могут быть присвоены обработчики событий другим элементам (ссылкам, элементам списка, кнопкам и пр.).
Некоторые элементы уже имею встроенные обработчики по-умолчанию. Например, клик по кнопке типа "submit" отправляет форму на сервер, а клик по ссылке перенаправляет браузер по указанному адресу. Но иногда возникает необходимость отключить стандартный обработчик. Сделать это очень просто - достаточно в обработчике вернуть значение false или воспользоваться свойствами объекта event.
Рассмотрим пример - проверка значений полей формы перед отправкой. Например, у нас есть форма подписки на почтовые рассылки. Форма состоит из поля ввода, куда пользователь должен вписать свой email, и кнопки "Отправить" типа "submit". Нам необходимо создать скрипт, который будет проверять поле ввода на наличие текста и запрещать отправку формы, если пользователь ничего не ввёл.
<head>
<script type="text/javascript" language="javascript">
function checkForm(evt)
{
// получаем значение поля email
var value = document.getElementById("email").value;
// если значение отсутствует -
// предупреждаем пользователя и
// запрещаем отправку почты
if(!value)
{
alert('не указан email!');
return false;
}
// иначе просто разрешаем отправку формы
return true;
}
</script>
</head>
<body>
<form action="subsribe.php" method="get" onsubmit="return checkForm();">
<input type="text" name="email" id="email" /> <br />
<input type="submit" name="sbm" id="sbm" value="Подписаться" />
</form>
</body>
Этот скрипт вполне работоспособен, но не совсем корректен с точки зрения системы событий JavaScript. Правильные способы обработки и блокировки собятий мы рассмотрим в уроках этого раздела.
