| | | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Главная  Программирование Java Работа со сценариями — обработчиками событий |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Работа со сценариями — обработчиками событийОглавлениеРабота со сценариями — обработчиками событий Страница 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, не могут быть обработаны с помощью функций-слушателей. Получение информации о событии Проблема Мне нужно получить кое-какую информацию о наступившем событии, в частности, координаты точки, по которой пользователь щелкнул мышью. Как это сделать? Решение (для Microsoft Internet Explorer и Opera) Использовать соответствующие свойства объекта event, доступного в теле функции — обработчика события. Все они перечислены в табл. 2.3. Таблица 2.3. Свойства объекта event
Таблица 2.4. Значения, возвращаемые свойством button объекта event
Пример Далее приведен фрагмент кода 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. Свойства объекта, несущего информацию о событии
Один обработчик событий сразу для нескольких элементов страницы Проблема Я хочу выполнять обработку событий сразу в нескольких элементах страницы одинаковым образом. Как это сделать? Решение 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-обозреватель передаст событие элементу страницы, в который вложена кнопка, т. е. в форму. Если бы к форме был привязан обработчик этого события, он бы выполнился, но, поскольку мы этим не озаботились, форма на него никак не отреагирует. « Пред. - След. » |
Архив статей
СИ-БИ техника
КВ техника УКВ техника Радиоизмерения Защита от TVI Источники питания Софт Расчеты Справочники СИ-БИ техника
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
