Michael Cain
0 
1089
160
Сегодня мы собираемся поднять его на ступеньку выше и показать, где сияет jQuery. - События. Если вы следовали предыдущим учебникам, теперь у вас должно быть достаточно хорошее понимание базовой структуры кода jQuery. Учебное пособие по jQuery - Начало работы: основы и селекторы Учебное пособие по jQuery - Начало работы: Основы и селекторы На прошлой неделе я говорил о важности jQuery. любому современному веб-разработчику и почему это круто. На этой неделе я думаю, что пришло время запачкать руки кодом и узнать, как ... (и все ужасные фигурные скобки, которые идут с ним), а также как найти элементы DOM и некоторые вещи, которые вы можете сделать, чтобы манипулировать их Введение в jQuery (часть 2): методы и функции Введение в jQuery (часть 2): методы и функции Это часть продолжающегося введения новичков в серию веб-программирования jQuery. В первой части были рассмотрены основы jQuery, как включить его в ваш проект, и селекторы. Во второй части мы продолжим с… Я также показал вам, как получить доступ к консоли разработчика в Chrome. Выясните проблемы с веб-сайтом с помощью инструментов разработчика Chrome или Firebug. Выясните проблемы с веб-сайтом с помощью инструментов разработчика Chrome или Firebug. Если вы уже читали мои руководства по jQuery, возможно, вы уже столкнулись с некоторые проблемы с кодом и не знаю, как их исправить. Когда вы сталкиваетесь с нефункциональным фрагментом кода, он очень… и как вы можете использовать его для отладки вашего кода jQuery.
События - среди прочего, - позволяют вам реагировать на события, происходящие на странице, и на взаимодействие с пользователем - щелчки, прокрутка и все эти интересные вещи..
Что такое событие??
Для новичков в программировании, где используется графический интерфейс, события относятся к любому виду взаимодействия между пользователем и приложением; или может быть сгенерировано внутри другого процесса. Приложения выбирают, какие события “Слушай”, и когда это событие вызвано, они могут реагировать каким-то образом.
Например, нажатие на экран вашего iPhone будет генерировать один “нажмите событие” с координатами х, у точно, где вы нажали. Если вы нажали на конкретный объект, например кнопку, вероятно, кнопка прослушивала это событие и, соответственно, выполнит некоторое действие. Если это была просто пустая часть интерфейса, к событию ничего не было прикреплено, поэтому ничего не произойдет.
Перемещение пальцем по экрану приведет к другому событию, которое включает в себя информацию о начальной и конечной точке перемещения и, возможно, о скорости. События предоставляют нам простой способ реагировать на вещи, которые происходят.
Легко: Нажав
Возможно, самое простое событие для прослушивания - это событие click, которое запускается всякий раз, когда пользователь нажимает на элемент. Это не должно быть конкретным “кнопка” - вы можете прикрепить прослушиватель событий к чему-либо на экране, но как веб-разработчик, вам, очевидно, нужно сделать это интуитивно понятным. Создание псевдокнопки из буквы скрытый внутри абзаца текст возможен, но несколько глуп.
Методы для прикрепления прослушивателя событий значительно изменились за годы разработки jQuery, но это текущий принятый метод, использующий on ():
$ (Селектор) .on (событие, действие);Для прослушивания “щелчок” событие на любых элементах с классом .нажми на меня, а затем записать сообщение на консоль, содержащую текст из элемента, по которому щелкнули, вы должны сделать:
$ (". clickme"). on ("click", function () console.log ($ (this) .text ()););Вы должны увидеть, что встроенное здесь действие - это анонимная функция, которая использует этот селектор (который относится к любому объекту, с которым в данный момент имеет дело jQuery) - в данном случае, к тому, на который щелкнули. Затем мы извлекаем текст этого нажатого объекта и записываем его в консоль. Легко, верно?
Остановите действие по умолчанию:
В какой-то момент вы захотите прикрепить что-то вроде ссылки или кнопку отправки формы, которая обычно делает что-то еще. В этом случае вполне вероятно, что вы не хотите, чтобы это оригинальное действие было выполнено - вместо этого вы хотите сделать какой-нибудь причудливый AJAX или специальную магию jQuery..
Чтобы предотвратить выполнение этого действия по умолчанию, у нас есть удобный метод с именем protectDefault. Очевидно. Давайте посмотрим, как это будет работать при работе с кнопкой отправки формы
$ ("# myForm"). on ("отправить", функция (событие) console.log (событие); event.preventDefault (); вернуть false;);Несколько изменений здесь - во-первых, мы прилагаем к Отправить событие вместо клика. Это более уместно при работе с формой, так как пользователь может Вкладка-пространство, удар войти, или ударил Отправить кнопка - все из которых будет запускать действие формы по умолчанию. Мы также передаем переменную события в анонимную функцию, поэтому мы можем обратиться к данные события. Затем мы использовали event.preventDefault () в комбинации с вернуть ложь чтобы остановить все обычные действия от завершения.
В этом случае это только запись события на консоль, но в действительности у вас, вероятно, будет здесь обработчик AJAX, который мы рассмотрим на следующем уроке..
События также могут быть инициированы вами
В последних двух примерах мы использовали метод on для прослушивания события, но вы также можете вручную инициировать событие, вызывая его вместо этого как метод. Трудно понять, почему вы можете использовать это, чтобы заставить “щелчок”, но имеет больше смысла, если мы посмотрим на фокус событий.
Фокус обычно используется с полями ввода для запуска сообщения, когда пользователь нажимает на поле для ввода текста - например, инструкции по формату, который нужно использовать. Но вы также можете использовать его, чтобы принудительно ввести пользователя в поле имени пользователя после загрузки страницы, чтобы он мог сразу же начать вводить свои данные для входа в систему..
$ (document) .ready (function () $ ('# username'.focus (););Если вы также подключили слушатель события фокуса к этому полю имени пользователя, он также будет срабатывать при принудительном фокусировании. Поэтому события могут быть инициированы и прослушаны.
А пока попрактикуйтесь в присоединении к различным событиям на странице - вы можете найти полный список всех доступных событий здесь - не забудьте использовать protectDefault, если это ссылка или кнопка, и посмотрите, какой вывод вы получите из консоли о данных события.
Я оставлю это там сегодня, когда мы приближаемся к концу этой мини-серии уроков по jQuery. К концу этого вы должны быть достаточно уверенными, чтобы добавить jQuery на свою страницу и заставить ее что-то делать. На следующей неделе мы рассмотрим AJAX - важную часть современной сети, которая позволяет загружать и отправлять запросы в фоновом режиме, не прерывая работу пользователя..
Как всегда, отзывы, вопросы, комментарии и проблемы приветствуются ниже.
Кредит изображения: Сенсорный экран через Shutterstock