- •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.4. События, о которых не было сказано
Есть еще события, которые мы не рассмотрели, но все же стоит сказать о них пару слов.
onchange – обработчик события, который активируется, когда Вы изменяете содержимое текстового элемента или текстовой области (<TEXTAREA>), это удобно, когда нужно сделать проверку на правильность заполнения поля, потому что это событие вызывается, если поле было изменено и тогда, когда от него теряется фокус – то, что нужно для проверки.
onselect – обработчик события выбора текста. То есть это событие происходит, когда пользователь пытается выделить текст в текстовом элементе или текстовой области. Обычно используется при создании текстовых редакторов на веб-странице, когда требуется изменять выделенный объект. Но получить выделенный объект, а тем более изменить его – не простая задача, хотя бы, потому что этот процесс работает по-разному в некоторых браузерах.
onerror – обработчик события error, которое возникает при ошибке загрузки документа или изображения (то есть onerror это атрибут тегов <body> и <img>). Оно возникает при синтаксической ошибке JavaScript-кода (но Вы ведь не будете специально делать в нем ошибки). Либо ошибкой времени выполнения, например, если Ваш скрипт выполняет какие-либо вычисления и у Вас по ошибке получится так, что некое число будет делиться на ноль, а это недопустимо – это и есть одна из ошибок времени выполнения.
Так же не забывайте, что мы привели лишь по одному примеру из десятков возможных на каждое событие. Здесь главное Ваша фантазия и навыки. Например, события mouseout, mouseover, mouseup, mousedown часто используются для создания выпадающих меню и других визуальных эффектов, но это весьма трудный материал, который требует более глубоких знаний, причем не одного JavaScript.
3. Return к функциям (функции и события)
Данный раздел подразумевает, что мы вернемся к функциям и найдем им применение в событиях.
Помните, следующий пример:
<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>
Видите, какой не наглядный, хотелось бы его немного сократить. Мы сможем это сделать при помощи функций, ведь это мы еще не разучились делать, а вызов функции это ведь тоже JS код и мы его можем писать в соответствующем событии.
Давайте сделаем функцию, которая будет изменять поле ввода следующим образом: если оно заполнено, стандартным текстом, то этот текст будет удален. В остальных случаях ничего не произойдет:
function clean() { element = document.getElementById('text'); if(element.value == 'Введите текст') { element.value = ''; element.style.color = 'black'; element.style.fontSize = 'normal'; element.style.fontStyle = 'normal'; } }
А теперь напишем функцию, которая будет делать все наоборот: выводить текст в текстовом поле, если оно не заполнено и предлагать заполнить его:
function fill() { element = document.getElementById('text'); if(element.value == '') { element.value = 'Введите текст'; element.style.color = 'grey'; element.style.fontSize = 'small'; element.style.fontStyle = 'italic'; } }
Да, а теперь давайте привяжем данные функции к определенным событиям на странице, и это будет проще простого:
<html> <head> <script> function clean() { var element = document.getElementById('text'); if(element.value == 'Введите текст') { element.value = ''; element.style.color = 'black'; element.style.fontSize = 'normal'; element.style.fontStyle = 'normal'; } } function fill() { var element = document.getElementById('text'); if(element.value == '') { element.value = 'Введите текст'; element.style.color = 'grey'; element.style.fontSize = 'small'; element.style.fontStyle = 'italic'; } } </script> </head> <body onLoad="javascript: fill();"> <input id="text" value="" type="text" style="width: 200px; height: 20px;" onFocus="javascript: clean();" onBlur="javascript: fill();" /> </body> </html>
Видите, как все стало намного проще. При загрузке страницы загружается текст, а при нажатии на текстовое поле он исчезает. А как реализуется вывод текста описано в блоке нашего скрипта.
Теперь наша задача состоит в том, чтобы сократить наш код. Во-первых, мы можем воспользоваться this вместо document.getElementById. Но помните, что this создается в момент события, но не в самом обработчике-функции, поэтому this нужно передать внутрь функции. Посмотрите, как это нужно делать и возьмите себе на заметку:
<html> <head> <script> function clean(element) { if(element.value == 'Введите текст') { element.value = ''; element.style.color = 'black'; element.style.fontSize = 'normal'; element.style.fontStyle = 'normal'; } } function fill(element) { if(element.value == '') { element.value = 'Введите текст'; element.style.color = 'grey'; element.style.fontSize = 'small'; element.style.fontStyle = 'italic'; } } </script> </head> <body onLoad="javascript: fill(document.getElementById('text'));"> <input id="text" value="" type="text" style="width: 200px; height: 20px;" onFocus="javascript: clean(this);" onBlur="javascript: fill(this);" /> </body> </html>
Единственное, что нужно сказать, это то, что в событии onLoad нельзя писать this, потому что this будет ссылкой на body, а нам нужно передать элемент text, который мы сможем получить при помощи document.getElementById.
Помните, как мы начинали тему функций: функции используются тогда, когда нужно упростить код, к примеру, если он повторяется. Если заметить, то в данном коде такое случается, при изменении свойств. Поэтому все это можно вынести в отдельную функцию.
К тому же текст типа 'Введите текст' повторяется два раза и если его придется изменить не целесообразно его менять в двух местах. Лучше всего создать переменную и пользоваться значением этой переменной везде. Помните, что использовать глобальную переменную внутри функции мы можем, если не создать внутри этой функции при помощи var другую переменную. Давайте сделаем все эти изменения:
<html> <head> <script> var enterText = 'Введите текст...';
function changeStyle(element, value, color, fontSize, fontStyle) { element.value = value; element.style.color = color; element.style.fontSize = fontSize; element.style.fontStyle = fontStyle; } function clean(element) { if(element.value == enterText) changeStyle('', 'black', 'normal', 'normal'); } function fill(element) { if(element.value == '') changeStyle(enterText, 'grey', 'small', 'italic'); } </script> </head> <body onLoad="javascript: fill(document.getElementById('text'));"> <input id="text" value="" type="text" style="width: 200px; height: 20px;" onFocus="javascript: clean(this);" onBlur="javascript: fill(this);" /> </body> </html>
Не на много стал код меньше, но зато намного понятнее, если конечно вы в совершенстве разобрались, зачем нам нужны функции. Если же вы этого не сделали, то самое время вам это начать.