События в JavaScript
События - это определенные действия, которые могут фиксироваться средствами JavaScript.
В качестве примера можно привести событие onmouseover, которое определяется в момент наведения курсора мыши на какой-либо объект страницы.
Еще одно событие - onload. Оно определяется в момент окончательной загрузки страницы.
Как правило, события используются совместно с функциями. При этом функция не выполняется до тех пор, пока не произойдет определенное событие.
Здесь в пример можно привести анимацию кнопки. Такая функция просто "переключает" между собой две картинки. Одна из картинок используется для показа "ненажатой" кнопки, другая - для случая, когда она "нажата".
Если такая функция будет вызываться при событии onmouseover (т.е. при наведении курсора на кнопку), то кнопка будет выглядеть "нажатой" в случае наведения на нее курсора.
В таблице ниже представлены события, распознаваемые JavaScript:
| Событие | Когда распознается | К каким элементам применяется |
| onabort | Прерывание загрузки изображения | img |
| onblur | Потеря фокуса текущим элементом, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции | a, area, button, input, label, select, textarea |
| onchange | Изменение значений элементов формы. Возникает после потери элементом фокуса, т.е. после события blur | input, select, textarea |
| onclick | Одинарный щелчок на элементе (нажата и отпущена кнопка мыши) | Практически все HTML-элементы (*) |
| ondblclick | Двойной щелчок на элементе | Практически все HTML-элементы (*) |
| onerror | Возникновение ошибки выполнения сценария | img, window |
| onfocus | Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции) | a, area, button, input, label, select, textarea |
| onkeydown | Нажата клавиша на клавиатуре | Практически все HTML-элементы (*) |
| onkeypress | Нажата и отпущена клавиша на клавиатуре | Практически все HTML-элементы (*) |
| onkeyup | Отпущена клавиша на клавиатуре | Практически все HTML-элементы (*) |
| onload | Загрузка документа завершилась | body, frameset |
| onmousedown | Нажата кнопка мыши в пределах текущего элемента | Практически все HTML-элементы (*) |
| onmousemove | Перемещение курсора мыши в пределах текущего элемента | Практически все HTML-элементы (*) |
| onmouseout | Курсор мыши выведен за пределы текущего элемента | Практически все HTML-элементы (*) |
| onmouseover | Курсор мыши наведен на текущий элемент | Практически все HTML-элементы (*) |
| onmouseup | Отпущена кнопка мыши в пределах текущего элемента | Практически все HTML-элементы (*) |
| onmove | Перемещение окна | window |
| onreset | Щелчок по кнопке типа "reset" (т.е по кнопке, производящей сброс данных формы) | form |
| onresize | Изменение размеров окна | window |
| onselect | Выделение текста в текущем элементе | input, textarea |
| onsubmit | Щелчок по кнопке типа "submit" (т.е. кнопке, производящей отправку данных из формы) | form |
| onunload | Попытка закрытия окна браузера и выгрузки документа | body, frameset |
(*) Практически все HTML-элементы : все, за исключением applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title
События обычно используются для двух задач:
1. Для выполнения (вызова) определенной функции при наступлении события.
2. Для показа popup-окна при наступлении события.
Ниже мы вкратце рассмотрим некоторые из событий.
События onfocus, onblur и onchange в основном используются совместно с валидацией полей формы (т.е. проверки данных в полях формы на соответствие определенным критериям).
Представьте, что у Вас есть функция с именем validateEmail(), которая проверяет, является ли корректным введенный пользователем email-адрес. Для этого проверяется наличие символа @ и "нормального" окончания, вроде ru или com. Соответственно, пользователи могут вводить свой адрес в специальное поле формы.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Зарегистрироваться и Начать продвижение
Теперь мы можете вызывать функцию validateEmail() всякий раз при наступлении события onchange, т.е. тогда, когда пользователь меняет содержимое данного поля (данное событие фиксируется при потере этим полем фокуса):
<input type="text" size="20" onсhange="validateEmail()">
События onload и onunload, как правило, используются для вывода popup-окон, когда человек переходит на какую-либо страницу, либо покидает ее.
Другое важное применение данных событий связано с использованием cookies, которые должны устанавливаться при заходе, либо при выходе с определенной страницы.
Предположим, у вас есть popup-окно, в котором новому посетителю вашего сайта предлагается ввести в форму сове имя. Имя после этого сохраняется в cookie. Затем, когда посетитель уходит с вашей страницы, в cookie сохраняется текущая дата.
В следующий раз, когда данный посетитель зайдет на эту страницу, появится другое popup-окно с текстом, вроде: "Добро пожаловать Иван Петрович, данная страница не обновлялась за те 5 дней, что Вас не было."
Другое распространенное применение событий onload и onunload - одновременное открытие большого числа новых окон при заходе, либо выходе со страницы. Это явное нарушение сетевого этикета и считается плохой практикой.
Событие onsubmit используется главным образом для валидации данных (т.е. проверки их на соответствие определенным критериям) формы до того, как они будут переданы обработчику этой формы.
Выше мы уже рассмотрели пример с событием onchage для валидации одного поля формы.
Иногда, правда, бывает не очень удобно (особенно для пользователя), когда проверка идет по мере заполнения полей. Вместо того, чтобы проводить валидацию каждого предыдущего поля при переходе к следующему, можно сделать это только после нажатия кнопки типа submit.
Реализовать это можно, используя событие onsubmit.
Представьте, что у Вас есть функция с именем checkform(), которая проверяет данные, введенные в форму.
Вы хотите, чтобы ее вызов происходил только тогда, когда человек нажмет на кнопку отправки данных.
Если содержимое не принимается обрабатывающей функцией, то отправка должна быть отменена. В этом случае данные не будут отправлены до тех пор, пока их не примет созданная Вами функция.
— Разгрузит мастера, специалиста или компанию;
— Позволит гибко управлять расписанием и загрузкой;
— Разошлет оповещения о новых услугах или акциях;
— Позволит принять оплату на карту/кошелек/счет;
— Позволит записываться на групповые и персональные посещения;
— Поможет получить от клиента отзывы о визите к вам;
— Включает в себя сервис чаевых.
Для новых пользователей первый месяц бесплатно. Зарегистрироваться в сервисе
Для этого Вам нужно добавить событие onsubmit для тэга form:
<form method="post" action="test.php" onsubmit="return checkform()">
Функция checkform() возвращает либо true, либо false. Если будет возвращено значение true, произойдет отправка данных из формы в обработчик test.php. В противном случае данные не будут отправлены обработчику.
События onmouseover и onmouseout в основном используются для создания эффекта анимации для кнопок и работы с картинками.
Пример: окно типа alert box появится как при наведении мыши на картинку, так и при выходе курсора мыши за ее пределы.
Проверить это удобнее, нажав в первом появившемся окне кнопку "ок" с помощью клавиши enter, а не мыши. В этом случае курсор мыши останется в пределах картинки и при его перемещении за пределы объекта будет показано новое сообщение в окне типа alert box.
Код данного примера:
<center><img onmouseover="alert('Мышь наведена на картинку (onmouseover)'); return false" onmouseout="alert('Мышь выведена за пределы картинки (onmouseout)'); return false" src="/img/2010/08/26/sobytija_js.jpg"></center>
По материалам www.echoecho.com
и http://vvz.nw.ru/
Перевод - Дмитрий
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
