Многие из всплывающих событий поддерживают возможность прерывания их всплытия на любом уровне. Это реализуется особым методом объекта 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 и Отмена. Такие окна-предупреждения обычно используются, чтобы запросить у посетителя подтверждение или отмену какого-либо действия:
