Программирование в Mozilla По материалам сайта. Добавление Javascript в XUL-страницы Добавление страниц с текстом на Javascript происходит точно так же, - презентация

1 Программирование в Mozilla По материалам сайта

2 Добавление Javascript в XUL-страницы Добавление страниц с текстом на Javascript происходит точно так же, как и в HTML-страницах – с помощью тега. var myFileName = null;... В качестве типа скрипта часто используется "text/x-javascript" – это «расширенный» Javascript. Не рекомендуется вставлять тексты скриптов непосредственно, лучше использовать отдельные файлы.">

3 Механизм обработки реакции на события Определим реакцию на щелчок мышью внутри некоторого элемента: При возникновении события его обработка проходит следующие фазы: 1.Capturing: событие распространяется от объектов window и document вниз до того элемента, внутри которого возникло событие; 2.Bubbling: после обработки в каждом из элементов событие начинает распространяться обратно вверх вплоть до объекта window. При обработке события в каждом из элементов сначала исполняется реакция, определенная программистом, а затем реакция «по умолчанию», определяемая типом и природой элемента. Можно управлять тем, на какой из фаз распространения происходит обработка события, продолжать ли распространение и сохранить ли реакцию «по умолчанию».

4 Пример определения реакции Событие command – это событие нажатия на кнопку, выбор элемента меню, выбор радио-кнопки и т.п. test findfiles Событие обрабатывается на фазе bubbling и покажет тег элемента, на котором произошло событие (сделали щелчок мышью или другим способом активизировали элемент). Добавим реакцию на кнопку «Отмена» в нашем диалоге поиска файлов: test findfiles">

5 Определение реакции на событие в js-файле Определим файл, содержащий весь javascript-код: findfiles.js и привяжем его к нашему диалогу.... window.addEventListener('load', FF_OnWindowLoad, false); function FF_OnWindowLoad() { var cancelButton = document.getElementById('cancel-button'); cancelButton.addEventListener( 'command', FF_CloseDialog, true); } function FF_CloseDialog() { window.close(); } findfiles-1

6 Свойства и методы события В функцию, определяющую реакцию на событие, всегда передается объект event. Он, в частности, имеет следующие атрибуты и методы: target – элемент, на котором возникло событие; currentTarget – элемент, на котором возникло событие; stopPropagation() – остановить процесс распространения события; preventDefault() – не выполнять реакцию «по умолчанию»; Если событие принадлежит определенному классу (событие от мыши, например), то дополнительно имеются атрибуты и методы, характеризующие этот конкретный класс событий. Mouse events: click – событие щелчка; dblclick – событие двойного щелчка; mousedown, mouseup – событие нажатия и отжатия кнопки; mousemove – событие изменения позиции курсора; mouseover, mouseout – событие изменения позиции курсора относительно выбранного элемента;

7 Свойства события от мыши и клавиатуры Если произошедшее событие – это событие от мыши, то объект event имеет следующие атрибуты: screenX, screenY – координаты курсора в точках от начала экрана; clientX, clientY – координаты курсора от текущего документа; В примере показано, как значения этих атрибутов используются для вычисления текущего положения курсора относительно окна и того элемента, внутри которого обрабатывается событие. mouse Keyboard events: keypress – событие нажатия клавиши; keydown, keyup – событие нажатия и отжатия клавиши; События от клавиатуры возникают на элементе, имеющем фокус. Если такого элемента нет, а клавиша нажата внутри активного окна, то событие возникает на всем документе. Соответствующую реакцию можно определять для элемента. На самом деле для определения глобальных событий от клавиатуры обычно используется другой механизм.

8 Определение функциональных клавиш «Глобальную» клавишу можно определить с помощью специального элемента, расположенного в составе набора. Ссылка на такую клавишу обычно делается из элемента меню или кнопки и это приводит к появлению текста клавиши в метке. findfiles-2 findfiles-2">

Преимущество" title="Исполнение кода команд Аналогично, вместо того, чтобы определять один и тот же код в разных элементах, можно определить его один раз в элементе.... Преимущество" class="link_thumb"> 9 Исполнение кода команд Аналогично, вместо того, чтобы определять один и тот же код в разных элементах, можно определить его один раз в элементе.... Преимущество такого выделения команд в отдельный элемент – можно приписывать им свойства (например, disabled ), не делая этого по отдельности для всех элементов, исполняющих эту команду. Помимо приписывания свойств, элемент может исполнить свою команду при вызове метода doCommand(); Используя эту методику, получим новый диалог findfiles :findfiles-3 Преимущество"> Преимущество такого выделения команд в отдельный элемент – можно приписывать им свойства (например, disabled ), не делая этого по отдельности для всех элементов, исполняющих эту команду. Помимо приписывания свойств, элемент может исполнить свою команду при вызове метода doCommand(); Используя эту методику, получим новый диалог findfiles :findfiles-3"> Преимущество" title="Исполнение кода команд Аналогично, вместо того, чтобы определять один и тот же код в разных элементах, можно определить его один раз в элементе.... Преимущество">

10 Отделение кода команд Так же, как и в случае HTML, практически весь код можно отделить от основного файла и поместить его в отдельный js-файл. findfiles-4 window.addEventListener('load', init, false); function init(event) { document.getElementById('cmd-search').addEventListener( 'command', doSearch, false); } function doSearch(event) { document.getElementById('progmeter').style.display = 'inherit'; }