Обработка событий в JavaScript
Популярность JavaScript во многом обусловлена именно тем, что написанный на нем сценарий может реагировать на действия пользователя и другие внешние события. Каждое из событий связано с тем или иным объектом: формой, гипертекстовой ссылкой или даже с окном, содержащим текущий документ.
В качестве примеров внешних событий, на которые могут реагировать объекты JavaScript, можно привести следующие.
- окончание загрузки документа в окно (или окончание загрузки документов во все фреймы окна). Это событие связано с объектом window;
- щелчок мышью на объекте. Это событие может быть связано с интерактивным элементом формы или с гипертекстовой ссылкой;
- получение объектом фокуса ввода. Это событие может быть связано с объектами типа Text, Password и с другими интерактивными элементами;
- передача на сервер данных, введенных пользователем с помощью интерактивных элементов. Связывается с формой.
Обработка события производится с помощью специально предназначенного для этого фрагмента кода, называемого обработчиком события. Для каждого события JavaScript предоставляет свой обработчик. Однако при построении сценария можно создавать собственный обработчик события и использовать его вместо обработчика, заданного по умолчанию.
Имя обработчика определяет, какое событие он должен обрабатывать. Так, для того чтобы сценарий нужным образом отреагировал на щелчок мышью, используется обработчик с именем onClick, для обработки события, заключающегося в получении фокуса ввода, - обработчик onFocus.
Для того чтобы указать интерпретатору JavaScript на то, что обработкой события должен заниматься обработчик, необходимо включить в HTML-дескриптор следующее выражение:
имя_обработчика="команды_обработчика"
Это выражение включается в тэг, описывающий объект, с которым связано событие.
Например, если необходимо обработать событие, заключающееся в получении фокуса полем ввода, дескриптор, описывающий этот интерактивный элемент, должен иметь примерно следующий вид:
<input type="text" name="Inform" onFocus="handleFocus();">
Имя обработчика является одним из атрибутов HTML-дескриптора, а команды, предназначенные для обработки события, выступают в роли значения этого атрибута. В данном случае обработка события производится в теле функции handleFocus(). В принципе, обработчиком может быть не только функция, но и любая последовательность команд JavaScript в виде составного оператора.
Следующий пример демонстрирует обработку события, связанного с наведением курсора мыши на гиперссылку:
<a href = "http://www.myhp.edu"
onmouseover="alert('An onMouseOver event'); return false">
<img src="my.gif" width="50" height="50">
</a>
Ниже приводится полный текст HTML документа c JavaScript сценарием, в котором обрабатывается событие нажатия кнопки мыши, и определяется, какая именно из них была нажата:
<html>
<head>
<script language = "javascript">
function whichButton(event)
{
if (event.button == 2)
{
alert("Вы щелкнули правой кнопкой мыши!");
}
else
{
alert("Вы щелкнули левой кнопкой мыши!");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>Щелкните любой кнопкой мыши в любом месте документа</p>
</body>
</html>
Пример 7.1. (html, txt)
Таким образом, для того чтобы обработать какое-либо стандартное событие в браузере, необходимо добавить в подходящий HTML тэг атрибут, соответствующий этому событию, указав в качестве значения атрибута имя JavaScript функции. Список атрибутов, которые определены для HTML тэгов приводится ниже:
IE: Internet Explorer, F: Firefox, O: Opera, W3C: стандарт
| Атрибут | Описание | Номер версии браузера | W3C | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| IE | F | O | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onabort | Прерванная загрузка изображения | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onblur | утрата фокуса элементом | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onchange | Изменение содержимого в поле ввода | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onclick | Щелчок мыши на объекте | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ondblclick | Двойной щелчок мыши на объекте | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onerror | Ошибка при загрузке изображения или документа | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onfocus | Получение фокуса элементом | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onkeydown | Нажатие клавиши | Нет | Да | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onkeypress | Клавиша нажата | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onkeyup | Отжатие клавиши | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onload | Завершение загрузки страницы или изображения | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onmousedown | Нажатие кнопки мыши | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onmousemove | Перемещение курсора мыши | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onmouseout | Смещение курсора мыши с объекта | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onmouseover | Наведение курсора мыши на объект | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onmouseup | Отжатие кнопки мыши | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onreset | Кнопка "Reset" нажата | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onresize | Изменение размера окна | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onselect | Выделение текста | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onsubmit | Кнопка "Submit" нажата | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| onunload | Уход с веб-страницы | Да | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Регулярные выражения
Регулярные выражения — система поиска текстовых фрагментов в электронных документах, основанная на специальной системе записи образцов для поиска.
Образец, задающий правило поиска, называется "шаблоном". Применение регулярных выражений принципиально преобразило технологии электронной обработки текстов.
С помощью регулярных выражений можно задавать структуру искомого шаблона и его позицию внутри строки (например, в начале или в конце строки, на границе или не на границе слова).
При описании структуры шаблона используются:
Кроме того, язык регулярных выражений предоставляет набор квантификаторов, позволяющих указать число повторений шаблона:
Имеются и более простые квантификаторы:
Для задания внутри шаблона группы символов можно использовать следующие операторы:
Для группировки отдельных частей шаблона можно использовать следующие операторы:
Если шаблон поиска включает специальные (как правило неотображаемые) символы, для их описания можно использовать следующие обозначения:
Квантификаторам в регулярных выражениях соответствует максимально длинная строка из возможных (т.е. квантификаторы являются "жадными"). Это может приводить к некоторым проблемам. Например, шаблон (<.*>) описывающий на первый взгляд теги HTML на самом деле будет выделять более крупные фрагменты в документе. Например, строка вида <p> <font color='blue'> <i>Регулярные выражения<i> </font> - удобный инструмент для поиска в строках </p> формально соответствует указанному выше шаблону Для решения данной проблемы можно использовать два подхода.
Например, по шаблону (<.*?>) будут найдены все теги из рассмотренной строки. Таким образом, получаются следующие "нежадные" модификации квантфикаторов:
Следует, однако, иметь в виду, что использование "ленивых" квантификаторов может привести к ситуации, когда выражению соответствует слишком короткая, в частности, пустая строка. |
Дата добавления: 2015-12-29; просмотров: 979;