Обработка событий в 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 Уход с веб-страницы Да
Регулярные выражения Регулярные выражения — система поиска текстовых фрагментов в электронных документах, основанная на специальной системе записи образцов для поиска. Образец, задающий правило поиска, называется "шаблоном". Применение регулярных выражений принципиально преобразило технологии электронной обработки текстов. С помощью регулярных выражений можно задавать структуру искомого шаблона и его позицию внутри строки (например, в начале или в конце строки, на границе или не на границе слова). При описании структуры шаблона используются:
  • гибкая система квантификаторов (операторов повторения);
  • операторы описания наборов символов и их типа (числовые, нечисловые, специальные).
Для того, чтобы задать положение искомого фрагмента внутри строки, можно использовать один из следующих операторов:
Представление Позиция
^ Начало строки
$ Конец строки
\b Граница слова
\B Не граница слова
(?=шаблон) Искомая строка следует после указанной строкой (с просмотром вперед)
(?!=шаблон) Искомая строка не следует после указанной строки (с просмотром вперед)
(?<=шаблон) Искомая строка следует после указанной строкой (с просмотром назад)
(?<!шаблон) Искомая строка не следует после указанной строки (с просмотром назад)

Кроме того, язык регулярных выражений предоставляет набор квантификаторов, позволяющих указать число повторений шаблона:

Представление Число повторений
{n} Ровно n
{m, n} От m до n включительно
{m,} Не менее m
{,n} Не более n

Имеются и более простые квантификаторы:

Представление Число повторений Эквивалент
* Ноль или более {0,}
+ Одно или более {1,}
? Ноль или одно {0,1}

Для задания внутри шаблона группы символов можно использовать следующие операторы:

Оператор Описание
[xyz] Любой символ из указанного множества
[^xyz] Любой символ не входящий в указанное множество
[x-z] Любой символ из указанного диапазона
[^x-z] Любой символ не входящий в указанный диапазон
. (точка) Любой символ кроме символов разрыва или переноса строки
\w Любой буквенно-цифровой символ, включая символ подчеркивания
\W Любой не буквенный символ
\d Любая цифра
\D Любой нецифровой символ
\s Любой не отображаемый символ
\S Любой символ (кроме неотображаемых символов)

Для группировки отдельных частей шаблона можно использовать следующие операторы:

Оператор Описание
( ) Поиск группы символов внутри скобок и сохранение найденного соответствия
(?: ) Поиск группы символов внутри скобок без сохранения найденного соответствия
| Комбинирование частей в одно выражения с последующим поиском любой из частей в отдельности. Аналогично оператору "ИЛИ".

Если шаблон поиска включает специальные (как правило неотображаемые) символы, для их описания можно использовать следующие обозначения:

Обозначение Описание
\0 Символ с нулевым кодом
\n Символ новой строки
\r Символ начала строки
\t Символ табуляции
\v Символ вертикальной табуляции
\xxx Символ, имеющий заданный восьмеричный ASCII код xxx
\xdd Символ, имеющий заданный шестнадцатиричный ASCII код dd
\uxxxx Символ, имеющий ASCII код выраженный ЮНИКОДОМ xxxx

Квантификаторам в регулярных выражениях соответствует максимально длинная строка из возможных (т.е. квантификаторы являются "жадными"). Это может приводить к некоторым проблемам. Например, шаблон (<.*>) описывающий на первый взгляд теги HTML на самом деле будет выделять более крупные фрагменты в документе.

Например, строка вида

<p>

<font color='blue'>

<i>Регулярные выражения<i>

</font>

- удобный инструмент для поиска в строках

</p>

формально соответствует указанному выше шаблону

Для решения данной проблемы можно использовать два подхода.

  1. В регулярном выражении учитываются символы, не соответствующие желаемому образцу (например, <[^>]*> для вышеописанного случая).
  2. Определение квантификатора как нежадного (ленивого) - большинство реализаций позволяют это сделать, добавив после него знак вопроса.

Например, по шаблону (<.*?>) будут найдены все теги из рассмотренной строки.

Таким образом, получаются следующие "нежадные" модификации квантфикаторов:

Модификатор Описание
*? "не жадный" эквивалент *
+? "не жадный" эквивалент +
{n,}? "не жадный" эквивалент {n,}

Следует, однако, иметь в виду, что использование "ленивых" квантификаторов может привести к ситуации, когда выражению соответствует слишком короткая, в частности, пустая строка.








Дата добавления: 2015-12-29; просмотров: 967;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.013 сек.