Первым параметром методу передается строка с названием события, к которому выполняется привязка обработчика. Названия событий приведены в первом столбце табл. 15.1.
Второй параметр — функция, которая станет обработчиком события. Эта функция должна принимать следующие параметры:
— первый — экземпляр объекта EventObject, представляющий сведения о событии и позволяющий им управлять (мы рассмотрим этот объект потом);
— второй — экземпляр объекта HTMLElement, представляющий элемент Web-страницы, в котором изначально возникло данное событие.
Кроме того, в функцию-обработчик неявно передается еще один параметр — экземпляр объекта HTMLElement, представляющий элемент Web-страницы, в котором в данный момент обрабатывается данное событие, — тот самый элемент, к которому привязан этот обработчик. Событие могло возникнуть в нем изначально, а могло всплыть из дочернего элемента; подробнее об этом будет рассказано в следующем разделе. Данный параметр доступен в теле функции-обработчика через переменную this.
Пример:
Ext.get('navbar'). on('mouseover', function(e, t) { Ext.get(this). addClass('hovered');});
Здесь мы привязываем к списку navbar обработчик события mouseover. Первый параметр метода on определяет название события, которое мы хотим обрабатывать. Второй параметр этого метода содержит объявление функции-обработчика.
В теле функции-обработчика мы обращаемся к переменной this, чтобы получить экземпляр объекта HTMLElement, представляющий элемент Web-страницы, чье событие мы обрабатываем. Чтобы получить из него соответствующий экземпляр объекта Element, мы используем метод get. После чего привязываем к полученному экземпляру объекта Element стилевой класс hovered вызовом метода addClass.
Отметим, что наша функция-обработчик принимает два параметра, которые, впрочем, нигде в ее теле не используются. Так что мы можем вообще не указывать их в объявлении функции-обработчика:
Ext.get('navbar'). on('mouseover', function() {Ext.get(this). addClass('hovered');});
Мы можем оформить обработчик события в виде функции, имеющей имя, а потом указать это имя в качестве второго параметра метода on:
function navbarMouseOver() { Ext.get(this). addClass('hovered');}
Ext.get('navbar'). on('mouseover', navbarMouseOver);
Это полезно, если мы хотим привязать один обработчик сразу к нескольким событиям одного или нескольких элементов Web-страницы.
Метод removeAllListeners объекта Element удаляет все привязанные к данному элементу Web- страницы обработчики событий. Он не принимает параметров.
Пример:
Ext.get('navbar'). removeAllListeners();
Всплытие и действие по умолчанию
И еще два важных вопроса, без понимания которых невозможно писать эффективные обработчики событий, — всплытие событий и их действия по умолчанию.
Давайте рассмотрим пункты списков, формирующих полосу навигации, и 'внешнего', и вложенного. Мы привязали к ним обработчики событий mouseOver и mouseOut — это выполняет второй Web-сценарий, написанный нами в
Листинг 15.5
var ceLinks = Ext.select('UL[id=navbar] LI'); ceLinks.on('mouseover', function(e, t) { Ext.get(this). addClass('hovered');});
ceLinks.on('mouseout', function(e, t) { Ext.get(this). removeClass('hovered');});
Откроем Web-страницу index.htm в Web-обозревателе и наведем курсор мыши на пункт 'HTML' 'внешнего' списка. Рамка вокруг него тотчас станет более темной. Уберем курсор — и рамка примет прежний цвет. Обработчики событий mouseOver и mouseOut работают.
Теперь наведем курсор мыши на один из пунктов вложенного списка, например, 'AUDIO'. Вокруг этого пункта также появится рамка. Что и неудивительно, ведь к пунктам вложенного списка также привязаны обработчики соответствующих событий.
Но при этом изменит свой цвет и рамка вокруг пункта 'HTML' 'внешнего' списка! Выходит, данные события возникают не только в пункте 'AUDIO' вложенного списка, но и в пункте 'HTML' 'внешнего' списка, в который он вложен. Почему?
Вот тут мы столкнулись со
Давайте рассмотрим всплытие событий на примере нашей полосы навигации. Мы наводим курсор мыши на пункт 'AUDIO' вложенного списка. В нем (в теге <LI>) возникает событие mouseOver. Поскольку к данному пункту списка привязан обработчик этого события, Web-обозреватель его выполняет. Далее событие 'всплывает' в сам вложенный список (тег <UL>). Никаких обработчиков событий мы к нему не привязали, поэтому событие сразу же следует в пункт 'HTML' 'внешнего' списка, в котором находится вложенный список. К нему, опять же, привязан обработчик события mouseOver, который выполняется Web-обозревателем. Далее событие 'всплывает' во 'внешний' список, контейнер cnavbar и секцию тела Web-страницы, в которой и прекращает свое существование.
Теперь посмотрим на пункт 'AUDIO' вложенного списка. В него вложен тег <CODE>, в который, в свою очередь, вложена гиперссылка (тег <A>), а в нее — уже текст 'AUDIO'. Когда мы наводим курсор мыши на этот текст, событие mouseOver возникает-то в теге <A>! Потом оно 'всплывает' в тег <CODE>, а уже после этого — в тег <LI>, формирующий пункт списка 'AUDIO', где и обрабатывается.
А сейчас представим, что событие mouseOver не всплывает. Тогда, чтобы обработать его в пункте вложенного списка, нам пришлось бы привязывать разные обработчики к тегам <LI>, <CODE> и <A>. Представляете, сколько потребуется кода! Который в этом случае будет еще и заметно сложнее…
Так что всплытие событий — благо для Web-программиста. Благодаря ему мы можем писать обработчики, реагирующие на события сразу в нескольких элементах Web-страницы, — для этого достаточно привязать обработчик к родителю этих элементов. Так, кстати, часто и делают.
Теперь об обработке всплывающих событий. Мы уже знаем, что функция — обработчик события принимает три параметра: два — явно, третий — неявно.
— Первый явный параметр — экземпляр объекта EventObject, хранящий сведения о событии. Разговор о нем пока отложим.
— Второй явный параметр — экземпляр объекта HTMLElement, представляющий элемент Web- страницы, в котором изначально возникло это событие. Отметим — возникло изначально, т. е. событие гарантированно не всплыло в него из какого-либо дочернего элемента.
— Неявный параметр, доступный в теле функции-обработчика через переменную this, — экземпляр объекта HTMLElement, представляющий элемент Web-страницы, в котором это событие обрабатывается, т. е. тот элемент, к которому привязан обработчик. Причем событие могло как возникнуть в этом элементе изначально, так и всплыть из дочернего элемента.
Если событие всплыло в данный элемент Web-страницы из дочернего элемента, то оба эти параметра указывают на разные элементы Web-страницы. Помните об этом!
