Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.


События в JavaScript

События - это определенные действия, которые могут фиксироваться средствами JavaScript.

В качестве примера можно привести событие onmouseover, которое определяется в момент наведения курсора мыши на какой-либо объект страницы.

Еще одно событие - onload. Оно определяется в момент окончательной загрузки страницы.

Как правило, события используются совместно с функциями. При этом функция не выполняется до тех пор, пока не произойдет определенное событие.

Здесь в пример можно привести анимацию кнопки. Такая функция просто "переключает" между собой две картинки. Одна из картинок используется для показа "ненажатой" кнопки, другая - для случая, когда она "нажата".

Если такая функция будет вызываться при событии onmouseover (т.е. при наведении курсора на кнопку), то кнопка будет выглядеть "нажатой" в случае наведения на нее курсора.

В таблице ниже представлены события, распознаваемые JavaScript:

Хостинг

СобытиеКогда распознаетсяК каким элементам применяется
onabortПрерывание загрузки изображенияimg
onblurПотеря фокуса текущим элементом, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляцииa, area, button, input, label, select, textarea
onchangeИзменение значений элементов формы. Возникает после потери элементом фокуса, т.е. после события blurinput, 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. Соответственно, пользователи могут вводить свой адрес в специальное поле формы.

Теперь мы можете вызывать функцию 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="http://www.codeharmony.ru/img/2010/08/26/sobytija_js.jpg"></center>

По материалам www.echoecho.com
и http://vvz.nw.ru/
Перевод - Дмитрий Науменко

P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

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

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

Наверх