Вы здесь: Главная » jQuery » Обработка событий в jQuery

Обработка событий в jQuery

Обработка событий в jQuery, в принципе, очень похожа на обработку событий в нативном JavaScript, т.к. вам придется:

  1. Указать элемент(-ы), для которых вы выполняете обработку события(-ий), используя для этого селекторы jQuery
  2. Указать, какое событие вы будете обрабатывать.
  3. Написать код в функции, которая и будет служить обработчиком события.

jQuery предлагает нам такие способы назначения обработчиков событий:

  1. $('селектор').событие(function(){ ... })
  2. $('селектор').on('событие', function(){ ... })
  3. $('селектор').bind('событие', function(){ ... }) (устаревший вариант)
  4. $('селектор').one('событие', function(){ ... })- однократное срабатывание события

Также вы можете отменить назначенные обработчики события(-й) с помощью методов:

  1. off()
  2. unbind() - устаревший способ

Обработчик типа событие()

Для того чтобы назначить такой обработчик, необходимо написать код в виде вызова функции с названием (именем) события:

Пример обработки клика на элементе div:

Пример в действии:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe itaque ducimus quibusdam ab, veniam expedita delectus dignissimos libero.
Eaque aliquid fugit dolorem doloremque! Similique, animi laborum! Recusandae ut, repellendus illum, beatae possimus at magnam laudantium quidem?
Minus blanditiis numquam dignissimos consequatur quos nemo, alias voluptatem libero. Explicabo iste esse quis tenetur veritatis molestiae ex.

В этом примере мы обрабатываем событие клика (click) для каждого из 3-х <div class="my-div">. В коде мы обращаемся к тому элементу, на котором пользователь делает клик мышью с помощью ключевого слова $(this) и вызываем для него метод toggleClass('bordered'), который проверяет, есть ли у нашего div-a атрибут class="bordered" и добавляет такой класс, если его не было, а при повторном клике на этом div-е удаляет класс bordered.

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

Событие hover()

Такого события нет в нативном JavaScript. Зато есть псевдокласс :hover, который вы наверняка использовали в CSS для создания эффектов при наведении мышью, особенно в сочетании с анимацией с помощью свойства transition. В этом случае вы должны понимать, что hover-эффекты всегда срабатывают при наведении и уведении курсора мыши на одном и том же объекте. То есть с точки зрения JavaScript это не что иное, как последовательная обработка 2-х событий - mouseover и mouseout. В случае с jQuery - это обработка событий mouseenter и  mouseleave, которые не распростаняются на вложенные элементы.  Для каждого из событий нужна своя функция-обработчик, поэтому для обработки события hover() в jQuery мы добавляем 2 функции:

Например, нам нужно сделать такие эффекты при наведении и уведении курсора мыши:

16 бриллиантовых плагинов jQuery

16 бриллиантовых плагинов jQuery

Из статьи вы узнаете о том, какие эффекты можно получить с помощью плагина jInvertscroll, как создать классический дизайн меню с помощью Slinky, какие вкладки можно сделать с помощью Tabslet, создать слайдер или карусель из изображений или текста, подключив плагин Slick, и много другой полезной информации

Таймер обратного отсчета с помощью плагина jQuery

Таймер обратного отсчета с помощью плагина jQuery

jQuery плагин FlipClock построен на CSS3 + jQuery. Он позволяет задать несколько параметров, которые наверняка пригодятся вам для работы. В статье приведен пример, который часто используется на посадочных страницах, которые сообщают о том, что акция закончится, например, через 2 дня.

В коде придется поработать с css-свойствами и разметкой:

Код в jQuery обрабатывает событие hover() c помощью 2-х функций с подобным кодом: мы находим вложенное изображение по селектору тега img с помощью строчки$(this).find("img"), а затем методом animate() поднимаем его вверх на 120% в первой функции и опускаем вниз до 0px во второй функции.

Примечание: событие hover() и метод animate() в основном применялись ранее, до появления в стандарте CSS3 такого свойства, как transition. Сейчас их использование в jQuery резко сократилось из-за того, что любые hover-эффекты можно создать средствами CSS. Тем не менее, вы можете использовать их для более старых браузеров, чтобы реализовать анимации в них.

Обработчик события on()

Вы можете использовать альтернативный синтаксис для обработки событий в jQuery: вместо функции, которая содержит название события, используйте метод on(). Он имеет такой синтаксис:

Если вы внимательно посмотрели приведенные выше примеры, то должны были заметить, что сфера действия обработчика события on() в jQuery куда больше, чем обработчика вида событие(): вы можете обработать не одно, а несколько событий, перечислив их в кавычках через пробел, а также делегировать обработку события от родительского элемента дочерним, просто указав их в качестве второго (необязательного) параметра.

Давайте рассмотрим, как это работает на примерах.

Добавление нескольких функций-обработчиков разных событий в методе on()

Рассмотрим пример с таблицей с некоторыми данными

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

Фамилия, ИмяТелефонEmail
Андреев Сергей322-44-55andreev@list.ru
Золочева Марина322-67-58zolocheva_mm@gmail.com
Иващенко Алексей322-44-67ivashenko@example.com
Семенова Анастасия322-19-09semenova_a@yahoo.com
Якунин Федор322-17-12yakunin@mail.ru

Пример с нескольких обработкой разных событий одной функцией в методе on()

Достаточно часто необходимо добавить несколько обработчиков событий для одного и того же элемента, и код при этом будет работать в одной и той же функции. Например, мы можем обрабатывать события ввода (input), вставки (paste) или нажатия клавиш (keydown) для поля ввода. Все эти события мы должны указать при вызове метода on() через пробел (хотя мне чаще хочется это сделать через запятую - нельзя!)

Смотрим на реализацию примера:

0 символов

Пример с делегированием событий

Задача состоит в следующем: необходимо поменять картинку и подпись под ней при клике на любой из радио-кнопок или при выборе любого пункта в выпадающем списке select. Кроме того, для картинки нужно изменить атрибуты alt (альтернативный текст, который отображается, если картинка не загружена) и title, который отвечает за всплывающую подсказку и виден при наведении на картинку. Также необходимо будет изменить подпись под картинкой в заголовке <h3> на тот текст, который находится рядом с отмеченной radio-кнопкой в элементе label или в выбранном элементе option в выпадающем списке.

Картинка имеет id="icon", заголовок <h3> находится сразу за картинкой, т.е. это следующий за картинкой элемент, поэтому в коде мы обращаемся к ним с помощью переменных:

Смотрим на работоспособность:

Выбор картинки с помощью radio-кнопок и select
Icon Video

Video

   

Изучаем разметку и код:

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

jQuery обработчик события on

Возможно, у вас вызвала вопрос строка:

Здесь в переменную text попадает либо текст, который записан между тегами <label></label>, находящимися за выбранной radio-кнопкой, либо между тегами <option></option> в выбранном пункте выпадающего списка <select>. В том случае, если вы выбираете какой-либо пункт из выпадающего списка, $(this).next().text() вернет пустую строку, что идентично false в JavaScript/jQuery, и в переменную text запишется значение, определяемое строкой $(this).children('option:selected').text().

Особенности использования делегирования событий

Когда вы делегируете обработку событий от родительского элемента дочерним, следует учитывать то, что чем выше в иерархии  дерева DOM будет находится родитель (body, например), тем чаще будет вызываться для него обработчик события, т.к. он будет ловить события, всплывшие от большего количества элементов. Причем при каждом таком вызове он будет производить проверку, а является ли источник этого события нужным элементом. То есть делегирование может привести к избыточным нагрузкам, связанным с вычислениями. Поэтому желательно привязывать делегированные обработчики к непосредственным родителям интересующих вас элементов.

Такие события, как focus и blur по спецификации W3C не имеют особенности подниматься вверх по иерархии DOM, однако в jQuery организованы их альтернативы — focusin и focusout, которые умеют "всплывать". Поэтому, если вы попытаетесь установить делегированные обработчики focus или blur, то jQuery по факту будет отслеживать focusin и focusout. Поэтому лучше сразу использовать обработчики focusin и focusout.

Еще одним событием, которое  не всплывает вверх по иерархии DOM, является событие load . В IE 8 и младше, события paste и reset так же не обладают этим свойством. Поэтому не стоит обрабатывать эти события делегированно. Привязывать обработчики этих событий следует непосредственно на элементы, на которых они происходят (без делегирования).

Добавление обработчика события методом bind() - устаревший способ

Этот метод существовал и использовался еще до появления метода on(). На данный момент необходимость назначать обработчики событий методом bind() является сомнительной, но пока еще доступной.

Синтаксис использования метода bind():

Если посмотреть внимательно, то все то же самое можно сделать (причем с версии jQuery 1.7) более современным методом on(). В официальной документации написано , что начиная с jQuery 3.0, метод bind() устарел. Это объясняется тем, что метод on() заменил собой такие методы, как bind(), delegate() и live(), поэтому стоит использовать именно его. Тем не менее, в Интернете существует масса примеров, в которых метод bind() используется и рекомендуется для присоединения обработчика событий к различным элементам.

Мы рассмотрим пример использования метода bind() для обработки события focusout для полей типа text и password формы. Однако еще раз подчеркнем, что его стоит заменить методом on().

Введите 1-4 символа в каждое из полей ввода и нажмите клавишу Tab - и вы увидите сообщение о том, что нужно не менее 5 сиволов.

Удаляем обработчики событий

Не очень часто, но все же бывает необходимо удалить обработчик события после того, как он выполнил свой код. В нативном JavaScript для того, чтобы удалить обработчик , нужно записать строку onсобытие=null или использовать метод removeEventListener('событие', имя_функции) , указав нужное событие и имя функции-обработчика.

В jQuery для удаления обработчика(-ов) событий служать методы off() и устаревший уже на данный момент unbind(). При минимальном знании английского языка вы можете найти зависимость между назначением и отменой обработчиков событий: on() включает (добавляет) обработчик, а off(), напротив выключает (отменяет) обработчик события; bind() - привязывает обработчик события, unbind()отвязывает его.

Удаление обработчика события методом off()

Метод off() удаляет обработчики событий, назначенные методом on()  и имеет подобный синтаксис.

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

Функция showInfo() либо назначается для обработки клика по каждому из h4 внутри <div id="test-block">, либо отменяется в зависимости от того, на какой кнопке под заголовками вы кликните. Обратите внимание, что изначально обработчик события для заголовков не задан, поэтому клики  по ним ничего не дадут.

Чтобы развернуть блоки, кликните на кнопку, добавляющую обработчик события.

What is "Lorem ipsum"?

Why do we need "Lorem ipsum"?

Where is "Lorem ipsum" using?

Is "Lorem ipsum" a real text?

 

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

Попробуйте сами.

Fireworks

Если заглянуть в Инспектор свойств в Firefox (F12), то можно увидеть, как изначально к кнопке привязан обработчик события (слово event справа от закрывающего тега), а после клика на ней - уже его нет.

Отмена обработчика событияТакое же действие можно, т.е. однократное срабатывание события с последующим удалением обработчика этого события, можно сделать с помощью метода one().

Отмена обработчика события методом unbind() - устаревший способ

Начиная с jQuery 3.0, метод unbind() считается устаревшим. Он был заменен методом off(), начиная с jQuery 1.7, поэтому его использование на данный момент не поощряется, но пока остается доступным. Вы можете посмотреть на пример его использования выше для таблицы.

Разовое (однократное) срабатывание события с помощью обработчика one()

В том случае, если вам необходимо, чтобы событие сработало однократно и больше не отслеживалось, используйте специальный обработчик one(). Его синтаксис таков:

Рассмотрим пример со списком покупок. Изначально у вас ничего нет из тех покупок, за которыми вы идете в магазин, на рынок или в супермаркет. Но с течением времени вы вычеркиваете те пункты, которые соответствуют купленным продуктам. Делать это что с реальным, что с электронным списком достаточно один раз.

Разметка и код примера будут таковы:

Большую часть работы здесь делае css. В коде мы просто добавляем класс 'choosen' к элементам li, на которых был выполнен клик.

Сам пример:

  • Картофель 2кг
  • Молоко 1л
  • Сыр российский 0,5кг
  • Мороженое "Супершоколад" 3шт.
  • Пепси-кола 0,5л

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

Обработчик события one()

В тех элементах li, на которых уже сделали клик, обработчик события отсутствует - там пусто в том месте, где у остальных li мы видим слово event, обозначающее, что к элементу добавлен обработчик события. Если же мы кликнем на слове event, то увидим, что там назначены 2 обработчика события click, и во втором таком обработчике вызывается функция off(), отменяющая обработку события.

Отмена обработки события в one() методом off()

 

Автор: Админ

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

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