HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов

Многие из всплывающих событий поддерживают возможность прерывания их всплытия на любом уровне. Это реализуется особым методом объекта EventObject, представляющем сведения о событии. Мы рассмотрим его чуть позже.

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

Обработчик, привязанный к событию, для которого Web-обозреватель выполняет действие по умолчанию, выполняется перед тем, как действие по умолчанию будет выполнено. Это предоставляет возможность отмены действия по умолчанию (не для всех событий) — вызовом особого метода все того же объекта EventObject. Мы рассмотрим данный метод очень скоро.

Получение сведений о событии. Объект EventObject

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

Метод getCharCode возвращает код алфавитно-цифрового символа, введенного с клавиатуры, в кодировке Unicode в виде числа. Он не принимает параметров.

Коды алфавитно-цифровых символов можно узнать с помощью утилиты Таблица символов, поставляемой в составе Windows.

Метод getKey возвращает код нажатой на клавиатуре клавиши в кодировке Unicode в виде числа. Он не принимает параметров.

Коды клавиш клавиатуры можно найти на Web-странице http://msdn.microsoft.com/en-us/library/ms927178.aspx.

Методы getPageX и getPageY возвращают, соответственно, горизонтальную и вертикальную координаты курсора мыши относительно Web-страницы в виде чисел в пикселах. Они не принимают параметров.

Метод preventDefault отменяет действия по умолчанию для события. Он не принимает параметров и не возвращает значения.

Метод stopPropagation отменяет дальнейшее всплытие события. Он не принимает параметров и не возвращает значения.

Метод stopEvent отменяет действия по умолчанию для события и отменяет его дальнейшее всплытие. Фактически он объединяет действие методов preventDefault и stopPropagation. Этот метод также не принимает параметров и не возвращает значения.

Мы можем исправить код нашего второго Web-сценария, написанного в главе 14, как показано в листинге 15.7, и посмотреть, что получится.

Листинг 15.7

var ceLinks = Ext.select("UL[id=navbar] LI");

ceLinks.on("mouseover", function(e, t) { Ext.get(this). addClass("hovered"); e.stopEvent();});

ceLinks.on("mouseout", function(e, t) { Ext.get(this). removeClass("hovered"); e.stopEvent();});

Объект CompositeElementLite

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

Мы можем получить доступ к одному элементу Web-страницы:

var elCMain = Ext.get("cmain");

Или сразу к нескольким:

var clContainers = Ext.select("DIV");

Мы помним, что метод select объекта Ext возвращает экземпляр объекта CompositeElementLite — коллекцию экземпляров объекта Element, представляющих все подходящие под указанный селектор CSS элементы Web-страницы. Настала пора рассмотреть объект CompositeElementLite подробнее.

Прежде всего, объект CompositeElementLite поддерживает все методы объекта Element, предназначенные для управления привязкой стилевых классов, атрибутами

тега и стиля, привязкой обработчиков событий и т. п. Так что мы можем привязывать стилевые классы и обработчики событий сразу к нескольким элементам Web-страницы. (Собственно, мы это уже делали.)

Метод getCount возвращает число элементов данной коллекции. Он не принимает параметров:

var i = clContainers.getCount();

В переменной i окажется число элементов в полученной ранее коллекции

clContainers — 5.

Метод item возвращает элемент данной коллекции с указанным индексом в виде экземпляра объекта Element:

<экземпляр объекта CompositeElementLite>.item(<индекс>)

Как видим, этот метод принимает единственный параметр — индекс требуемого элемента коллекции в виде числа.

Пример:

var elDiv = clContainers.item(i — 1);

В переменной elDiv окажется последний элемент коллекции clContainers. Поскольку элементы коллекции, как и элементы обычного массива, нумеруются, начиная с нуля, мы передали методу item значение, на единицу меньшее, чем число элементов в коллекции.

А в следующем примере мы последовательно извлекаем все элементы коллекции clContainers и выполняем над ними какие-то действия:

for(var k = 0; k < i; k++) {

var elDiv = clContainers.item(k);

// Что-то делаем

}

Метод indexOf возвращает индекс указанного элемента в данной коллекции в виде числа:

<экземпляр объекта CompositeElementLite>.indexOf(<элемент>)

Единственным параметром этому методу передается искомый элемент. Им может быть строка с именем элемента, экземпляр объекта Element или HTMLElement.

Если переданный элемент в коллекции отсутствует, метод indexOf возвращает –1.

Пример:

var ind = clContainers.indexOf("cnavbar");

В переменной ind окажется индекс контейнера cnavbar в коллекции clContainers — 1.

Метод each вызывает для каждого элемента данной коллекции указанную функцию:

<экземпляр объекта CompositeElementLite>.each(<функция>)

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

— элемент коллекции в виде экземпляра объекта Element;

— сама эта коллекция в виде экземпляра объекта CompositeElementLite;

— индекс элемента коллекции в виде числа.

Кроме того, элемент коллекции доступен в теле этой функции через переменную this.

В примере из листинга 15.8 мы привязываем к каждому контейнеру, входящему в коллекцию clContainers, стилевой класс hovered.

Листинг 15.8

clContainers.each(function(el, cl, ind)

{

el.addClass("hovered");

}

);

Листинг 15.9

Другой вариант того же Web-сценария иллюстрирует листинг 15.9.

clContainers.each(function(el, cl, ind)

{

this.addClass("hovered");

}

);

Еще проще написать так:

clContainers.addClass("hovered");

На этом мы пока закончим с библиотекой Ext Core. В следующих главах мы к ней еще вернемся и рассмотрим другие ее возможности.

Объекты Web-обозревателя

Как видим, библиотека Ext Core позволяет сделать очень многое, написав несколько строчек JavaScript-кода. Если бы мы пользовались для этого исключительно объектами Web-обозревателя, объем кода вырос бы на порядок — не меньше.

Но с помощью Ext Core мы можем сделать не все. Некоторые вещи доступны только через объекты Web-обозревателя.

Один из таких объектов — HTMLDocument, представляющий Web-страницу. Единственный его экземпляр, представляющий текущую Web-страницу, доступен через переменную document. Это мы уже знаем.

Из всех свойств объекта HTMLDocument интерес для нас представляют немногие. Его методы и события нам вряд ли пригодятся.

Свойство title хранит текст заголовка Web-страницы (содержимое тега <TITLE>) в виде строки. Заголовок, как мы помним из главы 1, выводится в строке заголовка окна Web-обозревателя, в котором открыта данная Web-страница.

Пример:

var sTitle = document.title;

В переменной sTitle окажется строка с текстом заголовка Web-страницы. А в следующем примере мы задаем для Web-страницы новый заголовок: document.title = "Заголовок";

Свойство location хранит экземпляр объекта Location, представляющий интернет-адрес Web-страницы. Нам будет полезно только свойство href, хранящее интернет-адрес Web-страницы в виде строки:

var sHREF = document.location.href;

В переменной sHREF окажется строка с интернет-адресом Web-страницы. Пример:

document.location.href = "http://www.w3.org";

Здесь мы переходим на Web-страницу http://www.w3.org. Да-да, с помощью свойства href объекта Location мы можем заставить Web-обозреватель открыть другую Web-страницу, присвоив этому свойству ее интернет-адрес!

Объект Window представляет окно Web-обозревателя. Единственный экземпляр этого объекта, представляющий текущее окно Web-обозревателя, хранится в переменной window. Это мы тоже знаем.

Рассмотрим полезные для нас методы и события объекта Window.

Метод alert выводит на экран окно-предупреждение с указанным текстом и кнопкой ОK. Такие окна-предупреждения выводят посетителю сообщение, которое он обязательно должен прочитать:

window.alert(<текст, выводимый в окне-предупреждении>)

Единственный передаваемый параметр — строка с текстом, который будет выведен в окне-предупреждении:

window.alert("Привет от объекта Window!");

Метод confirm выводит на экран окно-предупреждение с указанным текстом и кнопками ОK и Отмена. Такие окна-предупреждения обычно используются, чтобы запросить у посетителя подтверждение или отмену какого-либо действия: