|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | return_links(); ?>
Справочники
Главная arrow Программирование arrow Java arrow Работа со сценариями — обработчиками событий  

Работа со сценариями — обработчиками событий

Оглавление
Работа со сценариями — обработчиками событий
Страница 2
Страница 3
Страница 4
Страница 2 из 4

Первый шаг, который нам нужно сделать для создания обработчика события,— это написать функцию, которая, собственно, и станет этим самым обработчиком. Здесь нет ничего сложного — такие функции мы уже писали ранее, когда рассматривали предыдущие решения проблемы обработчиков событий.

Народ замечает

Функция-слушатель DOM может принимать один параметр. С этим параметром в функцию передается особый объект, предоставляющий сведения о событии. Мы рассмотрим его использование далее в этой главе.

Второй шаг, который мы сделаем, — зарегистрируем написанную функцию в качестве слушателя. Для этого используется метод addEventListener объекта, представляющего нужный элемент страницы. Формат вызова этого метода таков:

<Элемент страницы>.addEventListener(<Событие>, <Функция~слушатель>,<Яерехва шивать события, наступающее во вложенных элементах>);

Первым параметром методу передается название события в виде строки DOM. Оно совпадает с привычным для нас названием события, но без символов "on" и набранное маленькими буквами. Со вторым параметром все понятно — он задает функцию-слушателя, которую мы только что объявили. А вот о третьем параметре нужно поговорить подробнее.

Дело в том, что функция-слушатель, привязанная к элементу страницы, при нашем желании может обрабатывать события, наступающие в элементах страницы, вложенных в данный элемент. При этом, если к какому-либо из вложенных элементов привязана другая функция-слушатель, она будет выполнена после того, как отработает функция-слушатель текущего элемента. Таким образом, текущий элемент страницы может перехватывать события, наступающие во вложенных элементах, даже раньше, чем эти самые вложенные элементы на них отреагируют. Кстати, такое поведение функции-слушателя и называется перехватом событий.

Так вот третий параметр метода и задает режим перехвата событий функцией-слушателем. Он имеет логический тип; значение true запускает перехват событий вложенных элементов, а значение false — отключает.

Метод addEventListener не возвращает никакого значения. Сразу же после его вызова, если третьим параметром было передано значение true, функция-слушатель начинает обработку всех указанных событий.

Народ замечает

Для элемента страницы можно зарегистрировать сколько угодно функций-слушателей. Можно даже дважды зарегистрировать одну функцию — с включенным и отключенным режимом перехвата событий.

Метод removeEventListener объекта, представляющего нужный элемент страницы, позволяет убрать зарегистрированную ранее функцию-слушателя. Формат его вызова таков:

<Элемент страницы>.removeEventLis tener(< Со6ытрю>, <Функция-слушатель>,<Был ли включен режим перехвата событий>);

С первыми двумя параметрами все понятно. Третьим же параметром должно быть передано логическое значение true или false, в зависимости от того, был ли при регистрации функции-слушателя включен режим перехвата событий. Дело в том, что, как мы уже узнали, для элемента страницы можно зарегистрировать сколько угодно функций-слушателей, в том числе дважды зарегистрировать одну функцию — с включенным и отключенным режимом перехвата событий. Так вот, если мы так сделаем, нам придется убирать отдельно регистрацию с включенным режимом перехвата и отдельно регистрацию с отключенным режимом перехвата.

Метод removeEventListener также не возвращает никакого значения.

Еще один полезный метод — dispatchEvent — позволит нам перенаправить событие другому элементу страницы, чтобы он его обработал (если, конечно, для него зарегистрирована хоть одна функция-слушатель). Вот как он вызывается:

<Элемент страницы, которому перенаправляется событие>.dispatchEvent(<Событие>) ;

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

Народ советует

С объектом, передаваемым этим параметром, в функцию-слушатель поступает много полезной информации о событии. Так что лучше всегда его принимать, т. е. указывать этот параметр в объявлении функции-слушателя.

Пример

<HEAD>

<SCRIPT TYPE="text/javascript"> function btnOKOnClick() { var btnOKObject = document.all["btnOK"]; if (btnOKObject.value == "Нажми!")

btnOKObject.value = "Нажато" else

btnOKObject.value = "Нажми!"; }

</SCRIPT> </HEAD>

<BODY> <FORM>

<INPUT TYPE="button" ID="btnOK" VALUE="Нажми!"> </FORM> <SCRIPT TYPE="text/javascript">

var btnOKObject = document.all["btnOK"];

btnOKObject.addEventListener("click", btnOKOnClick, false); </SCRIPT> </BODY>

Обратим внимание, что код, выполняющий регистрацию функции-слушателя для кнопки btnOK, мы поместили после тега, создающего эту кнопку. Если бы мы поместили его перед этим тегом, Web-обозреватель не смог бы найти кнопку, поскольку ее HTML-код еще не загружен, и выдал бы сообщение об ошибке.

Список доступных событий

Проблема

Я не могу запомнить все поддерживаемые Web-обозревателем события. Приведите, пожалуйста, их список.

Решение

Нет ничего проще — см. табл. 2.2.

Таблица 2.2. События, доступные для обработки

Событие

Строка DOM для Firefox

Описание

onAbort

"abort"

Наступает при прерывании загрузки Web-страницы, графического изображения, апплета Java, расширения Web-обозревателя или элемента ActiveX

onBlur

"blur"

Наступает, когда элемент управления теряет фокус ввода

onChange

"change"

Наступает, когда элемент управления теряет фокус ввода, в случае если его содержимое было изменено пользователем

onClick

"click"

Наступает при щелчке мышью на элементе страницы

onContextMenu

 

Наступает, когда посетитель щелкает по странице или одному из ее элементов правой кнопкой мыши, чтобы вывести контекстное меню, перед собственно выводом контекстного меню. Поддерживается только Microsoft Internet Explorer, начиная с версии 5.0

onDblClick

 

Наступает при двойном щелчке мышью на элементе страницы

onError

"error"

Наступает при неудачной загрузке графического изображения, апплета Java, расширения Web-обозревателя или элемента ActiveX или ошибке в Web-сценарии

onFocus

"focus"

Наступает, когда элемент управления получает фокус ввода

onHelp

 

Наступает, когда посетитель нажимает клавишу <F1>, чтобы вывести на экран интерактивную справку, перед собственно выводом справки. Поддерживается только Microsoft Internet Explorer, начиная с версии 4.0

onKeyDown

 

Наступает, когда посетитель нажимает и удерживает клавишу

onKeyPress

 

Наступает, когда посетитель нажимает клавишу

onKeyUp

 

Наступает, когда посетитель отпускает нажатую ранее клавишу

onLoad

"load"

Наступает после завершения загрузки страницы, графического изображения, апплета Java, расширения Web-обозревателя или элемента ActiveX

onMouseDown

"mousedown"

Наступает при нажатии кнопки мыши, когда ее курсор находится над элементом страницы, перед событиями onMouseUp И onclick

onMouseMove

"mousemove"

Наступает при перемещении курсора мыши над элементом страницы

onMouseOut

"mouseout"

Наступает, когда курсор мыши перемещается за границы элемента страницы

onMouseOver

"mouseover"

Наступает, когда курсор мыши помещается на элемент страницы

onMouseUp

"mouseup"

Наступает при отпускании кнопки мыши, когда ее курсор находится над элементом страницы, после события onMouseDown и перед событием onclick

onReset

"reset"

Наступает при очистке Web-формы

onResize

"resize"

Наступает при изменении размеров окна Web-обозревателя пользователем

onScroll

"scroll"

Наступает при прокрутке Web-страницы

onSelect

"select"

Наступает при выделении текста в поле ввода или области редактирования

onSelectStart

 

Наступает, когда пользователь начинает выделять какой-либо текст на странице или в одном из ее элементов. Поддерживается только Microsoft Internet Explorer, начиная с версии 4.0

onSuhmit

"submit"

Наступает при отправке данных Web-формой

onUnload

"unload"

Наступает после выгрузки Web-страницы

События, для которых не указана строка DOM, не могут быть обработаны с помощью функций-слушателей.

Получение информации о событии

Проблема

Мне нужно получить кое-какую информацию о наступившем событии, в частности, координаты точки, по которой пользователь щелкнул мышью. Как это сделать?

Решение (для Microsoft Internet Explorer и Opera)

Использовать соответствующие свойства объекта event, доступного в теле функции — обработчика события. Все они перечислены в табл. 2.3.

Таблица 2.3. Свойства объекта event

Свойство

Описание

altKey

Возвращает true, если была нажата клавиша <Alt>

altLeft

Возвращает true, если была нажата левая клавиша <Alt>, и false, если правая

button

Возвращает номер кнопки мыши, нажатой посетителем. Список возвращаемых значений приведен в табл. 2.4

cancelBubble

Задает, прерывать или не прерывать "всплытие" событий. О "всплытии" событий мы поговорим далее в этой главе

clientx

Возвращает горизонтальную координату курсора мыши относительно клиентской области окна Web-обозревателя (без учета рамок, заголовка, строки меню, панелей инструментов и строки состояния)

clientY

Возвращает вертикальную координату курсора мыши относительно клиентской области окна Web-обозревателя (без учета рамок, заголовка, строки меню, панелей инструментом и строки состояния)

ctrlKey

Возвращает true, если была нажата клавиша <Ctrl>

ctrlLeft

Возвращает true, если была нажата левая клавиша <Ctrl>, и false, если правая

froitiElament

Возвращает элемент страницы, с которого переместился курсор мыши при наступлении события onMouseOver ИЛИ onMouseOut

keyCode

Возвращает код нажатой клавиши в стандарте UNICODE

offsetx

Возвращает горизонтальную координату курсора мыши относительно элемента страницы, в котором наступило это событие

offsetY

Возвращает вертикальную координату курсора мыши относительно элемента страницы, в котором наступило это событие

repeat

Возвращает true, если событие onKeyPress наступило повторно вследствие того, что пользователь удерживает клавишу нажатой, и false в противном случае

returnValue

Разрешает или отменяет действие по умолчанию для элемента страницы. Подробнее об этом мы поговорим далее в этой главе

screeriX

Возвращает горизонтальную координату курсора мыши относительно экрана

screenY

Возвращает вертикальную координату курсора мыши относительно экрана

shiftKey

Возвращает true, если была нажата клавиша <Shift>

shiftLeft

Возвращает true, если была нажата левая клавиша <Shift>, и false, если правая

srcElement

Возвращает элемент страницы, в котором наступило данное событие

toElement

Возвращает элемент страницы, на который был перемещен курсор МЫШИ при наступлении события onMouseOver ИЛИ onMouseOut

type

Возвращает имя события, набранное маленькими буквами, без символов "on"

X

Возвращает горизонтальную координату курсора мыши относительно родителя ("внешнего" по отношению к текущему элемента страницы)

У

Возвращает вертикальную координату курсора мыши относительно родителя

Таблица 2.4. Значения, возвращаемые свойством button объекта event

Значение

Описание

0

Ни одна из кнопок мыши не была нажата

1

Была нажата левая кнопка

2

Была нажата правая кнопка

3

Были одновременно нажаты левая и правая кнопки

4

Была нажата средняя кнопка

5

Были одновременно нажаты левая и средняя кнопки

6

Были одновременно нажаты правая и средняя кнопки

7

Были одновременно нажаты все кнопки

Пример

Далее приведен фрагмент кода Web-страницы, выводящей при щелчке мышью на ней окно-сообщение. В этом окне отображаются координаты курсора мыши относительно клиентской области окна Web-обозревателя.

<HEAD>

<SCRIPT TYPE="text/javascript"> function bodyOnClick() { window.alert("x=" + event.clientx.toString() + ", y=" +event.clientY.toString());

}                                                                                 

</SCRIPT> </HEAD> <BODY ONCLICK="bodyOnClick();">

<Р>Это некий текст.</Р> </BODY>

Решение (для Firefox)

Использовать соответствующие свойства объекта, который передается в функцию-слушатель и несет различную информацию о событии. Все они перечислены в табл. 2.5.

Таблица 2.5. Свойства объекта, несущего информацию о событии

Свойство

Описание

altKey

Возвращает true, если была нажата клавиша <Ait>

bubbles

Возвращает true, если событие может "всплывать". О "всплытии" событий будет рассказано далее в этой главе

button

Возвращает номер кнопки мыши, нажатой пользователем. Список возвращаемых значений приведен в табл. 2.4

cancelable

Возвращает true, если имеется возможность отменить действие по умолчанию для элемента страницы. О действиях по умолчанию и отмене их будет рассказано далее в этой главе

clientx

Возвращает горизонтальную координату курсора мыши относительно клиентской области окна Web-обозревателя (без учета рамок, заголовка, строки меню, панелей инструментов и строки состояния)

clientY

Возвращает вертикальную координату курсора мыши относительно клиентской области окна Web-обозревателя (без учета рамок, заголовка, строки меню, панелей инструментов и строки состояния)

ctrlKey

Возвращает true, если была нажата клавиша <Ctrl>

currentTarget

Возвращает элемент страницы, в котором в данный момент происходит обработка событий. Может не совпадать с элементом страницы, в котором наступило событие, если включен перехват событий (см, ранее) или событие "всплыло" (см. далее)

relatedTarget

Возвращает элемент страницы, с которого переместился курсор мыши при наступлении события onMouseOver, или элемент страницы, на который был перемещен курсор мыши при наступлении события onMouseOut

screenX

Возвращает горизонтальную координату курсора мыши относительно экрана

screenY

Возвращает вертикальную координату курсора мыши относительно экрана

shiftKey

Возвращает true, если была нажата клавиша <Shlft>

target

Возвращает элемент страницы, в котором наступило событие

type

Возвращает имя события в виде строки DOM

Один обработчик событий сразу для нескольких элементов страницы

Проблема

Я хочу выполнять обработку событий сразу в нескольких элементах страницы одинаковым образом. Как это сделать?

Решение 1

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

Пример

Вот фрагмент HTML-кода Web-страницы, в которой один обработчик события onclick привязан сразу к трем кнопкам:

<HEAD>

<SCRIPT TYPE="text/javascript">

// Объявление "универсального" обработчика событий function eventHandler() {

// Тело "универсального" обработчика события } </SCRIPT> </HEAD> <BODY> <FORM>

<INPUT TYPE="button" ID="btnl" VALUE="Кнопка 1"ONCLICK="eventHandler();">                                                                                       

<INPUT TYPE="button" ID="btn2" VALUE="Кнопка 2"ONCLICK="eventHandler();">

<INPUT TYPE="button" ID="btn3" VALUE="Кнопка 3"ONCLICK="eventHandler();"> </FORM> </BODY>

Решение 2

Использовать одну интересную возможность, называемую "всплытием" событий. Она часто позволяет избежать очень многих проблем.

Рассказать о ней проще всего на примере. Предположим, что на нашей Web-странице имеется форма с кнопкой. При этом к телу страницы (т. е. к тегу <body>) и кнопке привязаны обработчик события onclick. Что они делают, для нас в данный момент не важно.

Теперь предположим, что пользователь щелкнул по кнопке. В кнопке наступит событие onclick. Web-обозреватель запустит обработчик того события, что привязан к кнопке, а обработчик события что-то там выполнит.

Вы думаете, что на этом все закончится? Нет. Web-обозреватель передаст событие элементу страницы, в который вложена кнопка, т. е. в форму. Если бы к форме был привязан обработчик этого события, он бы выполнился, но, поскольку мы этим не озаботились, форма на него никак не отреагирует.


« Пред. - След. »


CitRadio.com - Электроника и компьютеры

0.1507