Сегодня мы собираемся поднять его на ступеньку выше и показать, где сияет jQuery — события . Если вы следовали предыдущим учебникам, теперь у вас должно быть достаточно хорошее понимание базовой структуры кода jQuery. (и все ужасные фигурные скобки, которые идут с ним), а также как найти элементы DOM и некоторые вещи, которые вы можно манипулировать ими . Я также показал вам, как получить доступ к консоли разработчика в Chrome. и как вы можете использовать его для отладки вашего кода jQuery.
События — среди прочего, — позволяют вам реагировать на события, происходящие на странице, и на взаимодействие с пользователем — щелчки, прокрутка и все эти интересные вещи.
Что такое событие?
Для новичков в программировании, где используется графический интерфейс, события относятся к любому виду взаимодействия между пользователем и приложением; или может быть сгенерировано внутри другого процесса. Приложения выбирают, какие события «прослушивать», и когда это событие запускается, они могут реагировать определенным образом.
Например, постукивание по экрану вашего iPhone сгенерирует одно «событие касания» с координатами x, y того места, где вы постучали. Если вы нажали на конкретный объект, например кнопку, вероятно, кнопка прослушивала это событие и, соответственно, выполнит некоторое действие. Если это была просто пустая часть интерфейса, к событию ничего не было прикреплено, поэтому ничего не произойдет.
Перемещение пальцем по экрану приведет к другому событию, которое включает в себя информацию о начальной и конечной точке перемещения и, возможно, о скорости. События предоставляют нам простой способ реагировать на происходящие события .
Легко: Нажав
Возможно, самое простое событие для прослушивания — это событие click, которое запускается всякий раз, когда пользователь нажимает на элемент. Это не должна быть конкретная «кнопка» — вы можете прикрепить прослушиватель событий к чему-либо на экране, но как веб-разработчик, вам, очевидно, нужно сделать это интуитивно понятным. Создание псевдокнопки из буквы, скрытой внутри абзаца текста, возможно, но несколько глупо.
Методы для прикрепления прослушивателя событий значительно изменились за годы разработки jQuery, но это текущий принятый метод, использующий on () :
$( selector ). on ( event , action ); Чтобы прослушать событие « click » для любых элементов с классом .clickme, а затем записать сообщение в консоль, содержащее текст элемента, по которому щелкнули, вы должны сделать:
$(".clickme").on("click",function(){ console.log($(this).text()); });
Вы должны увидеть, что действие, которое мы здесь внедрили, является анонимной функцией, которая использует селектор this (который относится к любому объекту, с которым jQuery в данный момент имеет дело) — в данном случае к объекту, по которому щелкнули. Затем мы извлекаем текст этого нажатого объекта и записываем его в консоль. Легко, правда?
Остановите действие по умолчанию:
В какой-то момент вы захотите прикрепить что-то вроде ссылки или кнопку отправки формы, которая обычно делает что-то еще. В этом случае вполне вероятно, что вы не хотите, чтобы это оригинальное действие было выполнено — вместо этого вы хотите сделать какую-нибудь причудливую AJAX или специальную магию jQuery.
Чтобы предотвратить выполнение этого действия по умолчанию, у нас есть удобный метод с именем protectDefault. Очевидно. Давайте посмотрим, как это будет работать при работе с кнопкой отправки формы
$("#myForm").on("submit",function(event){ console.log(event); event.preventDefault(); return false; });
Несколько изменений здесь — во-первых, мы прикрепляем к событию отправки вместо клика. Это более уместно при работе с формой, так как пользователь может нажать клавишу табуляции , нажать клавишу ввода или нажать кнопку « Отправить» — все это вызовет действие формы по умолчанию. Мы также передаем переменную события в анонимную функцию, чтобы мы могли ссылаться на данные события . Затем мы использовали event.preventDefault () в сочетании с return false, чтобы остановить выполнение всех обычных действий.
В этом случае это только запись события на консоль, но в действительности у вас, вероятно, будет здесь обработчик AJAX, который мы рассмотрим на следующем уроке.
События также могут быть инициированы вами
В последних двух примерах мы использовали метод on для прослушивания события, но вы также можете вручную инициировать событие, вызывая его вместо этого как метод. Трудно понять, почему вы можете использовать это, чтобы вызвать «щелчок», но имеет больше смысла, если мы посмотрим на событие фокуса.
Фокус обычно используется с полями ввода для запуска сообщения, когда пользователь нажимает на поле для ввода текста — например, инструкции по формату, который нужно использовать. Но вы также можете использовать его, чтобы принудительно ввести пользователя в поле имени пользователя после загрузки страницы, чтобы они могли сразу же начать вводить свои данные для входа.
$(document).ready(function(){ $('#username'.focus(); });
Если вы также подключили слушатель события фокуса к этому полю имени пользователя, он также будет срабатывать при принудительном фокусировании. Поэтому события могут быть инициированы и прослушаны.
А пока попрактикуйтесь, прикрепляя различные события на странице — вы можете найти полный список всех доступных здесь событий — не забудьте использовать protectDefault, если это ссылка или кнопка, и посмотрите, какой вывод вы получите из консоли о данных события.
Я оставлю это там сегодня, когда мы приближаемся к концу этой мини-серии уроков по jQuery. К концу этого вы должны быть достаточно уверенными, чтобы добавить jQuery на свою страницу и заставить ее что-то делать. На следующей неделе мы рассмотрим AJAX — важную часть современной сети, которая позволяет загружать и отправлять запросы в фоновом режиме, не прерывая работу пользователя.
Как всегда, отзывы, вопросы, комментарии и проблемы приветствуются ниже.
Кредит изображения: Сенсорный экран через Shutterstock