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

(<конфигуратор>)

var oConf5 = { tag: 'DIV', html: '<P>Новый контейнер с новым содержимым.</P>', id: 'cmain'

} Ext.get('cmain'). replaceWith(oConf5);

Метод wrap принимает в качестве параметра конфигуратор, создает на его основе элемент Web- страницы и помещает в него данный элемент, делая его потомком созданного элемента:

<экземпляр объекта Element>.wrap ([<конфигуратор>])

Как видим, при вызове этого метода мы можем не указывать конфигуратор. В таком случае метод wrap создаст блочный контейнер на основе тега <DIV>.

Пример:

Ext.select('UL[id=navbar]'). wrap();

Здесь мы заключаем список navbar, формирующий полосу навигации, в блочный контейнер. Обратим внимание, что мы не передали методу wrap никаких параметров — он сам 'поймет', что именно блочный контейнер мы хотим создать.

А в следующем примере мы заключаем все абзацы, непосредственно вложенные в контейнер cmain, в большие цитаты:

Ext.select('DIV[id=cmain] > P'). wrap({ tag: 'BLOCKQUOTE' });

Да, библиотека Ext Core представляет весьма мощные средства для создания новых элементов Web-страницы. К сожалению, удалить ненужные элементы можно

только методом remove объекта Element. Он немедленно удаляет данный элемент Web- страницы со всем его содержимым, не принимает параметров и не возвращает значения.

Пример:

Ext.get('cmain'). remove();

Здесь мы удаляем контейнер cmain со всем его содержимым.

Обработка событий

Теперь самое время рассмотреть один ключевой вопрос Web-программирования: события, их возникновение и обработка.

Понятие события и его обработки

Рассматривая примеры Web-сценариев, мы исходили из предположения, что они выполняются при загрузке Web-страницы. Как мы уже знаем из главы 14, Web- сценарий исполняется в том месте HTML-кода Web-страницы, в котором присутствует создающий его тег <SCRIPT>. При этом неважно, является Web-сценарий внутренним (помещенном прямо в HTML-код) или внешним (хранящимся в отдельном файле Web-сценария).

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

Событием в терминологии Web-программирования называется некое условие, которое возникает в Web-обозревателе в ответ на действия посетителя или в процессе работы самого Web-обозревателя. Так, щелчок левой кнопкой мыши на элементе Web-страницы приводит к возникновению события 'щелчок левой кнопкой мыши', а перемещение курсора мыши над элементом Web- страницы — 'перемещение курсора мыши'. Нажатие клавиши на клавиатуре приводит к возникновению события 'нажатие клавиши', а ошибка в загрузке изображения — 'ошибка загрузки'.

Существует много разнообразных событий, как говорится, на все случаи жизни. Ежесекундно их возникает десятки, если не сотни.

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

Что может делать обработчик события? Да что угодно! При наведении курсора мыши он может привязывать к элементу Web-страницы другой стилевой класс, меняя его представление. (Именно такой обработчик события мы создали в главе 14.) При щелчке левой кнопкой мыши на элементе Web-страницы — разворачивать или сворачивать блочный контейнер, открывая или скрывая его содержимое. А при изменении размеров окна Web-обозревателя — менять размеры блочных контейнеров, чтобы полностью занять ими клиентскую область окна.

Теперь уясним следующие моменты, связанные с обработчиками событий.

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

— Обработчик события привязывается к конкретному элементу Web-страницы, в котором возникают события, требующие обработки. Так, если нужно обработать событие 'щелчок левой кнопкой мыши' в каком-либо абзаце, обработчик привязывается к данному абзацу.

— Обработчик события привязывается к конкретному событию. Так, если мы привязали обработчик к событию 'щелчок левой кнопкой мыши', он будет выполняться только при возникновении именно этого события. Другие события, скажем, 'двойной щелчок левой кнопкой мыши', он обрабатывать не будет.

— Обработчик события выполняется только при возникновении заданного события в элементе Web-страницы, к которому он привязан. Во время загрузки Web- страницы он не выполняется.

— Мы можем привязать один и тот же обработчик сразу к нескольким элементам Web-страницы и нескольким событиям. Так, один и тот же обработчик может обрабатывать событие 'щелчок левой кнопкой мыши' в абзаце и в гиперссылке. Кстати, так часто и делают.

События объекта Element

Самые полезные для нас на данный момент события, поддерживаемые объектом Element библиотеки Ext Core, представлены в табл. 15.1. Их довольно много, и некоторые из них поддерживаются только определенными элементами Web- страницы.

Таблица 15.1. События объекта Element

Привязка и удаление обработчиков событий

Метод on объекта Element выполняет привязку указанной функции к указанному событию данного элемента Web-страницы в качестве обработчика:

<экземпляр объекта Element>.on(<событие>,