Событие нажатие клавиши jquery

Событие нажатие клавиши jquery

Регистрация и удаление обработчиков событий

События позволяют нам отследить изменение состояния элемента и обработать пользовательский ввод. Используя стандартный код JavaScript мы могли бы обработать событие прямо в разметке элемента с помощью соответствующих атрибутов. Например, обработаем нажатие кнопки:

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

Библиотека jQuery предлагает нам эффектный способ регистрации обработчиков событий у элементов с помощью метода bind .

Метод bind имеет следующий синтаксис: bind(‘тип_события’, функция_обработчика_события) . Например, обработаем нажатие кнопки с помощью jQuery:

Используя в обработчике выражение $(this) мы можем получить элемент, на котором было произведено событие. Используя свойства элемента, можно задать более сложную логику обработки события. Например, пусть у нас на странице несколько кнопок, и действия в зависимости от нажатой кнопки будут различаться:

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

Применяя метод bind, важно учитывать, что он добавляет обработчики для уже имеющихся элементов. К динамически добавленным элементам обработчики применяться не будут.

Метод unbind

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

Однократная обработка событий. Метод one

Метод one позволяет задать для элемента обработчик события, который будет срабатывать только один раз. После отработки произвойдет удаление обработчика:

В результате обработчик каждой кнопки сработает по разу.

В JQuery есть классная возможность выполнять действия, например запуск скрипта, по нажатию клавиш на клавиатуре пользователя. Это может быть полезным для создания программ, ну или перехода по основным разделам сайта.

Рассмотрим три способа:

keyup — Устанавливает обработчик возвращения клавиши клавиатуры в ненажатое состояние, либо, запускает это событие. Работает с английской и русской раскладкой клавиатуры одинаково!

keydown — устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие. Работает с английской и русской раскладкой клавиатуры одинаково!

keypress — Не очень. Работает только с одной раскладкой

Теперь рассмотрим 3 примера:

Скачать готовый пример, который визуально отобразит нажатие клавиш в вашем браузере

Во всех примерах запускается действие плавного выдвижения панели. Таблица соответствия JQuery для нажатых клавиш при методе keyup() и keydown() представлена ниже. Код нужной клавише находится только в столбике Dec! (Клавиша Ctrl – 17):

В данном уроке будет рассказано, как использовать события в jQuery. События являются фундаментом для большинства веб приложений JavaScript. Используя события ваш код может реагировать на то, что происходит в браузере, например, на то, что пользователь нажал кнопку, ввёл текст в поле ввода, или отправил форму.

Читайте также:  Прога для тестирования видеокарты

Данный урок не является полноценным руководством, но он включает в себя основы, которые нужны при написании большинства скриптов. Для реализации ваших идей вам может понадобиться полный список методов событий jQuery.

В данном уроке будут раскрыты следующие темы:

  • Что такое событие?
  • Работа с событиями
  • Простой обработчик события
  • Короткие методы для связывания общих событий
  • Доступ к элементам из обработчика события
  • Получение дополнительной информации о событии
  • Остановка действий по умолчанию и распространение событий
  • Сброс обработчика события
  • Принудительная генерация события

Что такое событие?

Событие в JavaScript (и jQuery) генерируется, когда что-то происходит с элементом на странице. В список общих событий входят:

click Генерируется, когда пользователь нажимает на элементе кнопку мыши dblclick Генерируется, когда пользователь делает двойной щелчок кнопкой мыши на элементе mouseover Генерируется, когда пользователь перемещает указатель мыши на элемент load Генерируется после того, как элемент, например, изображение, полностью загружен submit Генерируется, когда происходит отправка формы (данное событие генерируется только для элементов form )

Работаем с событиями

Для работы с событиями в jQuery нужно создать функцию, называемую , которая будет работать с событием, когда оно произойдёт. Затем вызывается метод jQuery , который привязывает функцию обработчик события к определённому событию для выбранного элемента (или элементов).

Существует много методов jQuery для привязки событий к обработчикам, но метод bind() является основным. Он принимает имя события и имя функции как аргументы и привязывает обработчик к событию для выбранного элемента (или элементов):

Затем, когда происходит событие, ваша функция-обработчик автоматически и событие обрабатывается так, как требуется.

Простой пример

Следующий пример показывает, как создать простой обработчик события и привязать его к событию click кнопки формы:

Если нажать на кнопку на странице, будет выведено окно сообщения с надписью "Всем — привет!".

Короткие методы для связывания общих событий

Для облегчения жизни jQuery имеет много коротких методов для связывания часто используемых событий с функциями- обработчиками. Вот некоторые из них:

click( functionName ) Эквивалентно вызову bind( ‘click’, functionName ) dblclick( functionName ) Эквивалентно вызову bind( ‘dblclick’, functionName ) load( functionName ) Эквивалентно вызову bind( ‘load’, functionName )

Например, вы можете переписать вызов метода bind() в выше приведённом примере следующим образом:

Полный список коротких методов можно найти в документации jQuery по методу bind() .

Доступ к элементам из обработчика событий

Когда событие вызывает функцию-обработчик, вы можете получить доступ к элементу как к объекту DOM из функции-обработчика с помощью ключевого слова this . Это означает, что вы можете получить больше информации об элементе, для которого сгенерировано событие, можете манипулировать данным элементом и так далее.

Читайте также:  Доступ к ролику ограничен в одноклассниках

Следующий пример создаёт пульсации кнопки (плавно затухает и плавно высвечивается снова) при нажатии на неё. Чтобы выполнить поставленную задачу, обработчик события получает доступ к объекту нажатой кнопки с помощью this , оборачивает его объектом jQuery, а затем вызывает методы jQuery fadeOut() и fadeIn() для организации пульсирования кнопки:

Получение дополнительной информации о событии

Часто ваш обработчик не нуждается в дополнительных сведениях о событии, которое его запустило. Но если нужно больше деталей о элементе, который сгенерировал событие, можно использовать ключевое слово this как уже было описано ранее. Однако, jQuery может снабдить вас большим количеством информации о событии, если в этом есть необходимость.

Чтобы получить больше сведений о событии, ваш обработчик должен принимать объект jQuery event в качестве аргумента. В таком случае обработчик события может получить доступ к дополнительной информации с помощью различных методов и свойств данного объекта.

Следующий пример не только выводит сообщение, когда нажата кнопка, но и указывает точную дату и время, когда произошло событие, а также выводит координаты X и Y указателя мыши в это время:

Выше приведённый скрипт использует три свойства 3 объекта event :

timeStamp Время, когда произошло событие pageX Координата X указателя мыши в момент нажатия на кнопку, по отношению к левому верхнему углу документа pageY Координата Y указателя мыши в момент нажатия на кнопку, по отношению к левому верхнему углу документа

Вы можете найти дополнительные сведения об объекте event , включая все его свойства и методы , в документации jQuery (к сожалению, пока в сети нет полноценного перевода на русский язык данного раздела, частично на русском языке можно найти информацию здесь).

Остановка действий по умолчанию и распространение событий

События в JavaScript имеют пару особенностей, о которых надо упомянуть:

  • Действия по умолчанию. многие события имеют действия по умолчанию. Например, если пользователь нажмет на ссылку, то по умолчанию событие click для ссылки открывает ссылку.
  • Распространение событий. Также известно как «всплытие» события, происходит тогда, когда вы привязываете обработчик к одному и тому же событию для элемента и его родителя. Например, вы привязываете обработчик к событию click для ссылки, и привязываете другой обработчик к событию click для параграфа, который содержит ссылку. Когда пользователь нажимает ссылку, обработчик события click ссылки запускается первым, а затем событие "всплывает" к родительскому параграфу, вызывая срабатывание его обработчика события click .

Часто нужно предотвращать запуск действий по умолчанию и/или распространение событий. Например, если установлен обработчик события click для ссылки, который нужен для проверки правильности заполнения формы перед тем как покинуть страницу, то нужно предотвратить переход по ссылке, который выполняется по умолчанию.

Читайте также:  Ячеистая топология плюсы и минусы

Или если для родительского элемента и его потомков установлены одинаковые обработчики события click может понадобиться предотвратить запуск всех функций в одно и тоже время.

Объект jQuery event даёт вам пару методов для того, чтобы остановить такое поведение программы:

preventDefault() Останавливает выполнение действий по умолчанию stopPropagation() Останавливает «всплытие» события к родительскому элементу

Следующий пример открывает ссылку в новом окне, когда на неё нажимают, и использует метод preventDefault() чтобы остановить открытие ссылки в текущем окне:

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

Сброс обработчика события

Если вы хотите удалить обработчик события из элемента, вызовите метод unbind() . Для удаления всех обработчиков события:

Для удаления обработчика заданного события:

Принудительная генерация события

Иногда нужно запускать события для элементов прямо из кода. Например, нужно отправить форму автоматически, когда пользователь нажмёт на ссылку.

Метод jQuery trigger() генерирует определённое событие для выбранного элемента (или элементов). Имя события нужно передать trigger() в триггер в качестве аргумента.

В примере происходит отправка формы, когда пользователь нажимает на ссылку на странице:

Вы также можете сгенерировать событие с помощью тех же коротких методов, которые использовались для привязки событий (они описаны выше в нашем уроке). Просто вызовите короткий метод без каких-либо аргументов. Например:

Резюме

В данном уроке мы рассмотрели, как работать с событиями в jQuery:

  • Что такое событие?
  • Работа с событиями
  • Простой обработчик события
  • Короткие методы для связывания общих событий
  • Доступ к элементам из обработчика события
  • Получение дополнительной информации о событии
  • Остановка действий по умолчанию и распространение событий
  • Сброс обработчика события
  • Принудительная генерация события

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-events/
Перевел: Сергей Фастунов
Урок создан: 10 Августа 2010
Просмотров: 101794
Правила перепечатки

5 последних уроков рубрики "jQuery"

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Ссылка на основную публикацию
Сколько секунд видео можно загрузить в инстаграм
Обновлено - 27 января 2020 IGTV — функция, с помощью которой можно выложить длинное видео в Инстаграм продолжительностью от 15...
Секреты работы в word
Все секреты Word. MicrosoftWord – одна из наиболее часто используемых программ. Все мы пользуемся этим приложением, зачастую даже не зная...
Секс во время соревнований
Воздерживаться или не воздерживаться – вот в чем вопрос Джоэл Сидман, кандидат наук Вот что вам нужно знать… Влияние секса...
Сколько символов на странице ворд
Вы можете посмотреть пример стандартной страницы перевода в формате doc. В рынке переводов можно встретить разные варианты определения условной страницы:...
Adblock detector