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

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

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

Пример определения реакции Событие command – это событие нажатия на кнопку, выбор элемента меню, выбор радио-кнопки и т.п. <window id="example-window" title="Пример определения реакции" xmlns:html=" xmlns=" Событие обрабатывается на фазе bubbling и покажет тег элемента, на котором произошло событие (сделали щелчок мышью или другим способом активизировали элемент). Добавим реакцию на кнопку «Отмена» в нашем диалоге поиска файлов: <button id="cancel-button" label="Отмена" oncommand="window.close();"/> test findfiles

Определение реакции на событие в 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

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

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

Определение функциональных клавиш «Глобальную» клавишу можно определить с помощью специального элемента, расположенного в составе набора. Ссылка на такую клавишу обычно делается из элемента меню или кнопки и это приводит к появлению текста клавиши в метке. <menuitem id="copy-menuitem" accesskey="c" key="copy-key label="Copy" oncommand="doCopy();"/> findfiles-2

Исполнение кода команд Аналогично, вместо того, чтобы определять один и тот же код в разных элементах, можно определить его один раз в элементе.... <menuitem id="copy-command" accesskey="c" key="copy-key label="Copy" command="cmd-copy"/> Преимущество такого выделения команд в отдельный элемент – можно приписывать им свойства (например, disabled ), не делая этого по отдельности для всех элементов, исполняющих эту команду. Помимо приписывания свойств, элемент может исполнить свою команду при вызове метода doCommand(); Используя эту методику, получим новый диалог findfiles :findfiles-3

Отделение кода команд Так же, как и в случае 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'; }