На этом шаге мы рассмотрим реализацию простого обработчика события.
Для иллюстрации некоторых приемов обработки событий предположим, что имеется одна страница, которая может отображаться с применением различных стилей в зависимости от желания пользователя.
Мы дадим пользователю возможность щелчком на кнопке переключаться между обычным представлением страницы, представлением, при котором вывод текста производится в пределах суженной области, и представлением, при котором текст выводится по всей ширине страницы увеличенным шрифтом.
В реальной ситуации грамотный веб-разработчик применит здесь принцип прогрессивного улучшения. Кнопки переключения стилей должны либо скрываться, если поддержка JavaScript отключена в броузере, либо, что еще лучше, функционировать как ссылки на альтернативные версии страницы. Будем предполагать, что все пользователи включили поддержку JavaScript в своих браузерах.
Ниже приводится разметка HTML для страницы с поддержкой переключения стилей:
<div id="container">
<div id="switcher">
<h3>Стиль</h3>
<div class="button selected" id="switcher-default">
Обычный
</div>
<div class="button" id="switcher-narrow">
Суженный
</div>
<div class="button" id="switcher-large">
Увеличеный
</div>
</div>
Объединив этот фрагмент с остальной частью разметки HTML и с простой таблицей стилей CSS, мы получим страницу, аналогичную показанной на рисунке.1.
Рис.1. Первоначальный вид переключателя стилей
Для начала мы реализуем действие кнопки Увеличенный (увеличенный размер). Чтобы обеспечить альтернативное представление страницы, необходимо определить класс CSS:
body.large .chapter {
font-size: 1.5em;
}
Следующая наша цель - применить класс large к тегу <body>. Это позволит изменить оформление страницы в соответствии с таблицей стилей. Мы уже знаем, что эта цель может быть достигнута с помощью инструкции:
$('body').addClass('large');
Однако нам необходимо, чтобы программный код выполнялся в результате щелчка на кнопке, а не в момент загрузки страницы, как это делалось до сих пор. Для этого мы будем использовать метод .bind(), который позволяет указать любое событие JavaScript и подключить к нему его обработчик. В данном случае событие называется click, а обработчиком является функция, содержащая строку, представленную выше:
$(document).ready(function() {
$('#switcher-large').bind('click', function() {
$('body').addClass('large');
});
});
Теперь наш программный код будет вызываться после щелчка на кнопке, и для вывода текста будет использоваться шрифт увеличенного размера, как показано на рисунке.2.
Рис.2. Вид страницы после щелчка на кнопке Увеличенный
Это все, что требуется для подключения обработчика события. Данный способ обладает преимуществами, приведенными при обсуждении метода .ready(). В случае необходимости мы можем многократно вызывать метод .bind(), добавляя дополнительные обработчики к одному и тому же событию.
Это не самое элегантное и эффективное решение поставленной задачи. В следующих шагах мы дополним и усовершенствуем его
На следующем шаге мы закончим изучение этого вопроса.
