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

.

События jQuery

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

Последнее обновление: 1.11.2015

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

<button onclick=»alert(‘Привет мир’);»>Нажать</button>

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

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

Метод bind имеет следующий синтаксис: . Например, обработаем нажатие кнопки с помощью jQuery:

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

Событие mousePress на JavaScript и jQuery

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

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

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

Метод unbind

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

$(‘button’).bind(‘click’, function(e){ alert(‘Привет мир!’); }); $(‘button’).unbind();

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

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

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

НазадСодержаниеВперед

Материал из JQuery

Перейти к: навигация, поиск

<< События

.keydown()

Устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие. Метод имеет три варианта использования:

.keydown(handler(eventObject)):jQuery1.0

— функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

.keydown(eventData, handler(eventObject)):jQuery1.4.3

— см. выше.
— дополнительные данные, передаваемые в обработчик.

Действие по нажатию клавиши в JQuery

Они должны быть представлены объектом в формате: .

.keydown():jQuery1.0

Вызывает событие keypress, у выбранных элементов страницы. Метод является аналогом .

Замечание 1: Убрать установленный обработчик можно с помощью метода unbind().

Замечание 2: Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования , можно найти в описании этих методов.

Замечание 3: Метод часто используют совместно с , который обрабатывает возвращение клавиши клавиатуры в ненажатое состояние.

Обработчик может быть установлен на любой элемент страницы, однако он получит уведомление о событии, только если этот элемент будет находиться в фокусе. Поскольку в различных браузерах список элементов, которые могут получать фокус, может отличаться, то надежнее всего будет привязать это событие к элементам формы. Если необходимо отслеживать нажатие клавиши не в отдельном элементе, а на всей странице сразу, то можно привязать обработчик к объекту документа: $(document).keydown(handler).

Код нажатой клавиши

Для того, чтобы узнать какая именно клавиша клавиатуры была нажата, можно посмотреть значение переменной , которая содержит код нажатой клавиши. Надо отметить, что метод как и определяет нажатую клавишу, а не вводимый символ, таким образом, при введении латинских «a» и «A» и кириллических «ф» и «Ф», переменная внутри обработчика события будет содержать одно значение — 65, поскольку все они находятся на одной кнопке. Таблицу с кодами всех клавиш представлена в отдельной статье.

Для того, чтобы узнать вводимый символ (а не клавишу) нужно использовать метод .

Пример

Ссылки

// установим обработчик события keydown, элементу с идентификатором foo// и проверим, какая именно клавиша была нажата $(’#foo’).keydown(function(eventObject){alert(’Клавиша клавиатуры приведена в нажатое состояние. Код вводимого символа — ‘+ eventObject.which);});   // вызовем событие keydown на элементе foo $(’#foo’).keydown();   // установим еще один обработчик события keydown, на этот раз элементам // с классом block. В обработчик передадим дополнительные данные $(’.block’).keydown({a:12, b:"abc"},function(eventObject){var externalData ="a="+ eventObject.data.a+", b="+ eventObject.data.b;alert(’Нажата кнопка клавиатуры. ‘+’В обработчик этого события переданы данные: ‘+ externalData );});

Что если я не успею сдать домашку к уроку?

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

У меня останется доступ к видео?

Да, видео будут доступны все время, после того, как ты прошел весь курс до конца.

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

А что, если у меня возникнут вопросы?

На свои вопросы всегда можно получить ответы в общем чате, который в telegram, там помимо тебя учится еще человек 20 и кто-то уже точно решил твою проблему. А если нет, то решить вопрос легче в коллективе, нежели одному сидеть и ковырять код.

Я хочу заниматься с наставником. Как быть?

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

События jQuery

Он помогает справиться с ошибками, найти решение быстрее. Эта опция не доступна по умолчанию. Ее активировать могут только те, кто оплатил доступ к курсу.

Есть дополнительные материалы?

Да, тебе не придется верстать, смотря на экран. Все исходники к урокам предоставлены к каждому уроку. Также есть дополнительные материалы, которые пригодятся в домашке.

Что будет после прохождения курса?

Ты научишься писать свои скрипты на jQuery и сможешь брать новые заказы на фрилансе. Прокачавшись в jQuery тебе будет проще освоить другие библиотеки для js, такие как React, Angular и Vue js.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *