HTML, Excel, Word, SEOОсновы JavaScript ⇒ События

ОСНОВЫ JavaScript

Учебник JavaScript
·Знакомство с JS. Переменные, операторы, операции
·Функции
·Модель HTML документа
·Иерархия документов в бразуере
·Формы
·Окна и фреймы
·Ссылки, заголовок, статус
·События
·События клавиатуры и мыши
·События. Таймер
·Стили. Управление стилями
·Слои и блоки. Управление видимостью
·Объекты JS
·Внешние объекты
·Внутренние объекты
·Массивы
·Регулярные выражения
·Математика в JS
·Пример простого калькулятора
·Дата и время
·Cookies и хранение состояния
·Немного об AJAX
·Работа с WebMoney

 
Сабмит сайта в каталоги

Курс обучения 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. Правильные способы обработки и блокировки собятий мы рассмотрим в уроках этого раздела.

 



В начало страницы



В начало страницы