Дронов Владимир
Шрифт:
Если событие всплыло в данный элемент Web-страницы из дочернего элемента, то оба эти параметра указывают на разные элементы 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 подробнее.