Сегодня мы собираемся поднять уровень и показать, где jQuery действительно сияет – события. Если вы следовали предыдущим урокам, то теперь у вас должно быть достаточно хорошее понимание базовой структуры кода jQuery (и всех ужасных фигурных скобок, которые к нему прилагаются), а также того, как находить элементы DOM и некоторые вещи, которые можно делать для манипулирования ими. Я также показал вам, как получить доступ к консоли разработчика в Chrome и как ее можно использовать для отладки кода jQuery
Сегодня мы собираемся поднять уровень и показать, где jQuery действительно сияет – события. Если вы следовали предыдущим урокам, то теперь у вас должно быть достаточно хорошее понимание базовой структуры кода jQuery (и всех ужасных фигурных скобок, которые к нему прилагаются), а также того, как находить элементы DOM и некоторые вещи, которые вы можете делать для манипулирования ими. Я также показал, как получить доступ к консоли разработчика в Chrome и как ее можно использовать для отладки кода jQuery
События – помимо прочего – позволяют вам реагировать на происходящее на странице и взаимодействие с пользователем – щелчки, прокрутку и прочее
Что такое событие?
Для тех, кто только начинает программировать с использованием графического интерфейса, события относятся к любому виду взаимодействия между пользователем и приложением или могут генерироваться внутренним процессом. Приложения выбирают, какие события ‘слушать’, и когда это событие срабатывает, они могут реагировать определенным образом
Например, при нажатии на экран iPhone генерируется одно событие ‘tap event’ с координатами x,y именно в том месте, где вы нажали. Если вы нажали на определенный объект, например, на кнопку, то, скорее всего, кнопка прослушивала это событие и выполнит соответствующее действие. Если же это была просто пустая часть интерфейса, то к событию ничего не было привязано, и поэтому ничего не произойдет
Перетаскивание пальца по экрану генерирует еще одно событие, которое содержит информацию о начальной и конечной точке движения, а также, возможно, о скорости. События предоставляют нам простой способ реагировать на происходящее
Легко: щелчок
Пожалуй, самое простое событие, которое можно прослушать, – это событие click, которое происходит всякий раз, когда пользователь нажимает на элемент. Это не обязательно должна быть конкретная ‘кнопка’ – вы можете прикрепить слушателя событий к чему угодно на экране, но как веб-разработчик вы, очевидно, должны сделать это интуитивно понятным. Создание псевдокнопки из буквы a , спрятанной в абзаце текста, возможно, но несколько глупо
Методы прикрепления слушателя событий значительно изменились за годы развития jQuery, но в настоящее время общепринятым является метод с использованием on():
$(<span style='color: #3366ff;'>selector</span>).<span style='color: #ff0000;'>on</span>(<span style='color: #339966;'>event</span>,<span style='color: #ff00ff;'>action</span>);Чтобы прослушать событие ‘щелчок’ для любых элементов с классом .clickme, и затем записать в консоль сообщение с текстом элемента, на котором был сделан щелчок, нужно сделать следующее:
$('.clickme').on('click'function
console.log($(this).text());
});Вы должны видеть, что действие, которое мы здесь встроили, является анонимной функцией, которая использует селектор this (который ссылается на объект, с которым jQuery имеет дело в данный момент) – в данном случае на объект, на который был сделан щелчок. Затем мы извлекаем текст этого щелкнутого объекта и записываем его в консоль. Легко, правда?
Остановить действие по умолчанию:
В какой-то момент вы захотите прикрепить к чему-то ссылку или кнопку отправки формы, которая обычно делает что-то другое. В этом случае, вполне вероятно, что вы не захотите, чтобы выполнялось исходное действие – вместо этого вы захотите сделать какой-нибудь причудливый AJAX или специальную магию jQuery
Чтобы предотвратить это действие по умолчанию, у нас есть удобный метод под названием preventDefault. Очевидно. Давайте посмотрим, как это будет работать при работе с кнопкой отправки формы
$('#myForm').on('submit'functionevent
console.log(event);
event.preventDefault();
returnfalse
});Здесь несколько изменений – во-первых, мы привязываемся к событию submit вместо click. Это более уместно при работе с формой, так как пользователь может нажать пробел, ввод или кнопку submit – все это вызовет действие формы по умолчанию. Мы также передаем переменную event в анонимную функцию, чтобы можно было ссылаться на данные event data. Затем мы используем event.preventDefault() в сочетании с return false , чтобы остановить выполнение всех обычных действий
В данном случае это только запись события в консоль, но в реальности здесь, вероятно, будет обработчик AJAX, который мы рассмотрим в следующем уроке
События также могут быть инициированы вами
В предыдущих двух примерах мы использовали метод on для прослушивания события, но вы также можете вручную вызвать событие, вызвав его как метод. Трудно понять, почему вы можете использовать это для принудительного ‘клика’, но это имеет больше смысла, если мы посмотрим на событие focus
Фокус обычно используется с полями ввода, чтобы выдать сообщение, когда пользователь нажимает на поле для ввода текста – например, обучающее сообщение об используемом формате. Но вы также можете использовать его, чтобы заставить пользователя войти в поле имени пользователя после загрузки страницы – чтобы он мог сразу же начать вводить свои данные для входа в систему
$(document).ready(function
$('#username'.focus();
});Если бы вы также прикрепили слушатель события фокуса к этому полю имени пользователя, он также срабатывал бы при принудительном наведении фокуса. Таким образом, события могут быть и вызваны, и прослушаны
Пока что потренируйтесь, прикрепляясь к различным событиям на странице – полный список всех доступных событий вы можете найти здесь – не забудьте использовать preventDefault, если это ссылка или кнопка, и посмотрите, что вы получите в консоли о данных события
На этом я заканчиваю эту мини-серию уроков по jQuery. К его концу вы должны быть достаточно уверены в себе, чтобы бросить немного jQuery на свою страницу и заставить ее что-то сделать. На следующей неделе мы рассмотрим AJAX – важную часть современного веба, которая позволяет загружать и отправлять запросы в фоновом режиме, не отвлекая пользователя
Как всегда, отзывы, вопросы, комментарии и проблемы приветствуются ниже
Изображение кредитное: Сенсорный экран на Shutterstock
Комментировать