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

Ради эксперимента давайте изменим код второго Web-сценария, написанного в главе 14, так, как показано в листинге 15.6.

Листинг 15.6

var ceLinks = Ext.select('UL[id=navbar] LI'); ceLinks.on('mouseover', function(e, t) { Ext.get(t). addClass('hovered');});

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

Здесь мы в теле функций-обработчиков получаем не элемент, в котором обрабатывается событие (переменная this), а элемент, в котором это событие изначально возникло (второй параметр этих функций t). Что получится в результате?

Наведем курсор мыши на текст пункта 'AUDIO' списка. В теге <A> возникнет событие mouseover, которое потом всплывет в тег <CODE> и далее — в тег <LI>. В теге <LI> оно и будет обработано. Только стилевой класс hovered в результате будет привязан не к тегу <LI>, а к тегу <A>! А поскольку для этого тега больше никаких параметров рамки не задано (стилевой класс hovered задает только цвет рамки — см. главу 14), рамка вокруг него не появится. Совсем другой результат!

В табл. 15.1, перечисляющей события объекта Element, прямо указано, какие события всплывают, а какие — нет. Да-да, не все события относятся к всплывающим… Но такие 'невсплывающие' события обычно очень специфичны и требуют обработки, что называется, на месте.

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