- •2. Что такое события в JavaScript
- •2.1. Как связать событие и JavaScript
- •2.3. Основные события в JavaScript
- •2.4. События, о которых не было сказано
- •3. Return к функциям (функции и события)
- •4. Еще один пример использования функций и событий
- •5. События и его свойства (Event)
- •5.1. Передача объекта Event внутрь обработчика события
- •5.2. Всплывание события cancelBubble
- •5.3. Вызов стандартного обработчика
- •5.4. Практика работы с мышью: перетаскивание элементов
- •6. Функции (нюансы) Итак, события мы рассмотрели полностью, но в функциях существует множество нюансов, поэтому следующая тема будет посвящена именно им.
- •6.1. Знакомство с рекурсией.
- •Пример на рекурсию
- •Р екурсии или итерации?
- •6.2. Функция – это переменная. Несколько видов объявлений функций.
- •6.3. Функция внутри функции
- •6.4. Условная функция
- •7. Самостоятельное задание:
2.3. Основные события в JavaScript
Мы ознакомились с азами, теперь необходимо просмотреть основные события, как и с чем их можно использовать. Параллельно вы можете придумывать свои обработчики и проверять работоспособность данных событий. Кстати, все события собраны в конце урока, как маленькая шпаргалка, так же мы будем их упоминать в дальнейших уроках.
а) onMouseOut и onMouseOver
Следующий пример показывает, что это за события:
<html> <body> <input type="submit" value="Готово" onMouseOver="document.getElementById('help').innerHTML='Щелкните для отправки данных'" onMouseOut="document.getElementById('help').innerHTML=''" /> <input type="reset" value="Сброс" onmouseover="document.getElementById('help').innerHTML='Щелкните для удаления введенного'" onmouseout="document.getElementById('help').innerHTML=''" /> <div id="help"></div> </body> </html>
Для начала наведем курсор на кнопку "Сброс" или "Отправить" и обратим внимание, что снизу выводиться сообщения. Вы должны увидеть надписи с объяснением значения кнопки. Теперь отведите курсор, и сообщение очистится.
Сообщение записывается в div с идентификатором help. Давайте, вспомним, как записать в него программно сообщение: document.getElementById('help').innerHTML. Эта штука относиться к DOM и мы ее изучали на прошлом уроке. Изменение значения осуществляется операцией присваивания, это мы помним.
Поэтому для того, чтобы изменить надпись в строке состояния, нам нужно присвоить конструкции document.getElementById('help').innerHTML нужное нам значение (подсказку к кнопке), а когда курсор будет убран – присвоить пустую строку ('').
Вся задача сводится к тому, чтобы определить, когда пользователь наводит курсор на кнопку, а когда убирает его. Для этого нужно "сказать" обработчикам этих событий выполнить нужное нам действие. Обработчик события "наведение курсора" – onmouseover, а "отведение курсора" – onmouseout.
Очень многие тэги имеют атрибуты, начинающиеся с on (onclick, onmouseout, onfocus и т. д.). Значение этих атрибутов и есть, задача, которую необходимо выполнить соответствующему обработчику. То есть для обработчика onmouseout есть атрибут onmouseout, для onmouseover – onmouseover. И в итоге мы получаем следующее определение кнопок, которое мы видели выше.
Как Вы видите, атрибут onmouseover имеет в качестве значения JavaScript-код: document.getElementById('help').innerHTML='Щелкните для отправки данных', как только курсор достигает кнопки, обработчик события mouseover – onmouseover, смотрит, что хранится в атрибуте onmouseover и выполняет необходимое действие (присвоение значения переменной document.getElementById('help').innerHTML). Аналогично действует и обработчик события onmouseout: как только курсор уводиться от кнопки (то есть выполняется событие mouseout), то обработчик события – onmouseout выполняет код, содержащийся в атрибуте onmouseout.
То же самое и со второй кнопкой.
Такие события можно привязывать не только к кнопкам, но и к любым элементам HTML.
б) onClick
Этот событие мы уже рассмотрели, но все же давайте еще раз по шагам.
<html> <body> <input type="submit" value="Скрыть" onClick="document.getElementById('help').style.display='none'" /> <div id="help">Текст, который будет скрыт, если нажать кнопку</div> </body> </html>
Дабы скрыть текст мы сделали щелчок (Click) на кнопке "Скрыть", а щелчок это нажатие и отпускание кнопки мыши, причем и то и другое должно быть произведено на одном и том же элементе (например, на кнопке). Кликая, на кнопке мы активируем, обработчик события onClick, который выполняет для нас JavaScript-код, прописанный в атрибуте onclick нашей кнопки. Чтобы скрыть текст нам нужно его найти в DOM по идентификатору и задать ему CSS свойство программно: document.getElementById('help').style.display='none'.
onСlick – Это одно из наиболее частоупотребляемых событий.
в) onFocus и onBlur
Ну что ж будем ближе подбираться к вводу требуемой от нас информации.
<html> <body> <input id="text" type="text" value="Введите текст" onFocus="document.getElementById('text').value='';" onBlur="this.value='Введите текст'; " /> </body> </html>
Как я уже говорил: элемент получает фокус, когда на нем происходит нажатие кнопки мыши, или на него осуществляется переход посредством клавиши табуляции (Tab), а теряет, когда фокус получает другой элемент. Наше поле для ввода получит фокус тогда, когда пользователь решиться ввести информацию. При этом было бы удобно, чтобы текст с подсказкой ("Введите текст") автоматически исчезал, и пользователю не пришлось удалять по одному символу, или выделять текст вручную и удалять. Удобство пользователя свято. Итак, для этого мы воспользуемся событием focus. То есть атрибутом к полю надо прописать: onFocus="document.getElementById('text').value='';", нежно добавить комментарий к этому: document.getElementById('text') получает текущий элемент, а чтобы обратиться к свойству элемента value, мы обращаемся к нему через точку, так же как и к innerHTML или style. Собственно у текущего элемента value мы программно меняем на пустую строку. Соответственно, при отведении курсора мы заполняем это значение на предыдущее. Событие onBlur это и делает. Правда в данном случае мы использовали какую-то переменную this. Переменная this создается в момент события и хранит ссылку на текущий элемент, такую же ссылку мы получаем при помощи document.getElementById('text') и у этого элемента this мы обращаемся к полю value. Заметьте, что для данного случая document.getElementById('text') и this одно и то же.
Примечание:
Используйте переменную this в момент вызова события, чтобы обратиться к текущему элементу, вместо команды document.getElementById для упрощения кода.
Давайте проследим, что даже если пользователь заполнит поле и отведет курсор, то в нем все равно высветиться сообщение "Введите текст". А нам необходимо, чтобы оно высвечивалось, если пользователь ничем не заполнил наше поле. Т.е. если оно осталось пустым. Это можно реализовать при помощи условного оператора, но код значительно увеличиться:
<html> <body> <input id="text" type="text" value="Введите текст" onFocus="this.value='';" onBlur="if(this.value == '') this.value='Введите текст';" /> </body> </html>
Я думаю, объяснять, как работает условный оператор не нужно, тем более он был описан в предыдущих уроках и вы его уже должны знать очень хорошо.
Опять наш код работает не совсем корректно: когда пользователь все же вводит текст, то он не удаляется, но зато, когда пользователь нажимает на текст снова, то он исчезает. Решение предлагается далее, кстати, мы еще добавили пару интересных вещей, попробуйте проследить, как это сделано.
<html> <body> <input id="text" type="text" style="color: grey; font-size: small; font-style: italic; width: 200px; height: 20px;" value="Введите текст" onFocus="if(this.value == 'Введите текст') {this.value=''; this.style.color='black'; this.style.fontSize='normal'; this.style.fontStyle='normal';}" onBlur="if(this.value == '') {this.value='Введите текст'; this.style.color='grey'; this.style.fontSize='small'; this.style.fontStyle='italic';}" /> </body> </html>
Видите, как не наглядно.… Чуть позже мы попытаемся разобраться с этой неразберихой.
г) onReset и onSubmit
Допустим, что пользователь заполнил форму неправильно, и он хочет очистить все поля формы одновременно: для этого он воспользуется стандартной кнопкой «reset». Но что если пользователь щелкнет на ней по случайности (рука дрогнет, или в суете спутает с кнопкой submit), а форма была огромная, и он долго мучился ее заполнять..., ему будет грустно. Поэтому хорошо бы у него дополнительно спросить: действительно ли он хочет очистить форму.
Вообще событие reset обрабатывается до очистки формы. А чтобы отменить очистку вообще, нам просто-напросто надо вернуть обработчику события значение «false», то есть прописать в соответствующем атрибуте: "return false;", а чтобы продолжить очистку: "return true;". А теперь вспомним функцию, которая выдает вопрос пользователю на подтверждение чего-либо, эта функция: "confirm('Вопрос?');". При нажатии "Ok", эта функция заменяется на true, а при нажатии "Cancel" на false. То есть все что от нас требуется, это прописать в теге <form> атрибут: onreset="return confirm('Вы действительно хотите сбросить форму?');". Тогда при нажатии "Ok" там на самом деле будет "return true;", и форма будет очищена, а если "Cancel", то "return false;" и очистка формы будет отменена.
Подобным образом действует событие submit, которое возникает при попытке отправить форму. Поскольку в нашем случае форму отправлять никуда не надо, то у меня просто написано: onsubmit="return false;". И сколько бы Вы не щелкали, ничего не изменится (разве что Вы JavaScript отключите).
Обычно же обработчик onsubmit используется для верификации формы (то есть проверки на заполнение всех необходимых полей, правильность их заполнения, скажем, проверка по определенному шаблону и т. п.), для этого создается функция, которая выполняет все действия. Функция должна содержать операторы "return true" и "return false", которые позволяют заменить функцию на true или false, соответственно, в зависимости от результатов проверки (если успешно, то true, если нет false). Но верификация данных это обширная тема, которая не может быть рассмотрена здесь, мы ее рассмотрим позже.
<html> <body> <form action="page.cgi" onreset="return confirm('Вы действительно хотите сбросить форму?');" onsubmit="return false;"> <input type="text" value="" /> <input type="text" value="" /> <input type="submit" value="Отправить" /> <input type="reset" value="Сбросить" /> </form> </body> </html>
д) onMouseDown и onMouseUp
Еще одна пара событий не нашла достойного места на странице, но я ее реализовал в виде кнопки "Button". Причем это не обычная html-кнопка, она реализована в виде двух картинок. Исходная кнопка хранится в файле с именем npressed.jpg, а нажатая – pressed.jpg. Чтобы достичь эффекта нажатия кнопки нам необходимо, чтобы при щелчке на ней (this) значение стиля CSS background-image менялось на pressed.jpg, а при отпускании обратно на npressed.jpg. Нажатие кнопки обрабатывает onmousedown, а отпускание – onmouseup, то есть здесь все просто. В данном примере, мы не будем указывать картинки в виде фона, а просто поменяем фон, а если хотите, то вы можете сделать собственные картинки и попробовать то, о чем мы говорили.
<html> <head> <style> div { display: inline; cursor: default; background-color: buttonface; border: 2px outset buttonface; color: buttontext; padding: 0px 2px; text-align: center; } </style> </head> <body> <div onmousedown="this.style.border='2px inset'" onmouseup="this.style.border='2px outset buttonface'"> Типа Кнопка </div> </body> </html>
е) onLoad, onUnload и onAbort
Обработчик события onload активируется, когда начинает загружаться графическая часть страницы (все тексты, графика и т.п.). onload является атрибутом тега <body>. onunload это тоже атрибут тега <body>. Событие unload происходит когда мы пытаемся покинуть данную страницу (переходим по ссылке на другую, закрываем окно браузера, обновляем страницу и т. д.).
Другими словами, вызывается одно из двух событий: либо страница или картинка загружена, либо нет. Исходя из этого, можно решать проблемы загрузки страницы. Кстати, будьте уверены, что при вызове события onlaod будут загружены все элементы страницы и при этом document.getElementById не вызовет ошибки.
<html> <body onLoad="alert('Страница загружена');"> Страница </body> </html>
onabort – атрибут тега <img>. Когда пользователь отменяет загрузку изображения происходит событие abort. Но отмена загрузки изображения может не входить в наши планы. И в качестве предупреждения у нас может быть написано нечто похожее на:
<img src="myimage.jpg" onabort="alert('Изображение до конца не загружено! Это может привести к ошибкам.');" />