JavaScript Урок 17 События
События - это действия, которые JavaScript может отследить.
Реакция на Событие
Пример ниже показывает дату, когда была нажата кнопка:
Пример
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
</body>
</html>
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает
|
События
С помощью JavaScript у нас появляется возможность создавать динамичные веб страницы. События - это действия, которые JavaScript может обнаружить и отследить.
Каждый элемент на веб странице имеет определенные события, которые могут приводить в действие JavaScript. Например, мы можем использовать событие onClick элемента button, чтобы запустить функцию, когда пользователь нажимает по этой кнопке. Мы определяем события в HTML тегах.
Примеры событий:
- Клик Мыши
- Загрузка веб страницы или изображения
- Перемещение мыши над "горячей зоной" на веб странице
- Выбор поля ввода на HTML форме
- Отправка данных с HTML формы
- Нажатие на клавишу
Замечание: События обычно используются вместе с функциями, и функция не будет выполняться пока не произойдет событие!
onLoad и onUnload
События onLoad и onUnload происходят, когда пользователь заходит или покидает страницу.
Событие onLoad часто используется для проверки типа браузера посетителя и версии браузера, и загрузки соответствующей версии веб страницы на основе этой инофрмации.
Оба события onLoad и onUnload также часто используются, когда мы имеем дело с cookies, которые должны быть установлены, когда пользователь заходит или покидает страницу. Например, вы могли бы сделать всплывающее окно, спрашивающее имя пользователя, когда он впервые заходит на вашу страницу. Имя часто сохраняется в cookie. В следующий раз, когда посетитель зайдет на вашу страницу, вы могли бы создать другое всплывающее окно, например: "Добро пожаловать Вася Иванов!".
onFocus, onBlur и onChange
События onFocus, onBlur и onChange часто используются при проверке полей формы.
Ниже пример того, как использовать событие onChange. Функция checkEmail() будет вызвана как только пользователь меняет значение поля:
| <input type="text" size="30" id="email" onchange="checkEmail()"> |
onSubmit
Событие onSubmit используется для проверки ВСЕХ полей формы перед их отправкой.
Ниже пример, как использовать событие onSubmit. Функция checkForm() будет вызвана когда пользователь нажмет кнопку отправки на форме. Если значения полей будут не приемлемы, отправка должна быть отменена. Функция checkForm() возвращает либо true, либо false. Если она возвращает true, то произойдет отправка введенных данных с формы, в противном случае отправка будет отменена:
| <form method="post" action="process_form_data.htm" onsubmit="return checkForm()"> |
onMouseOver
Событие onmouseover может использоваться, чтобы запускать функцию, когда пользователь перемещает указатель мыши над HTML элементом:
Пример
Перемещайте мышь над солцем и планетами, чтобы увидеть различные описания.
|
Попробуйте сами »
|
|
