От автора: приветствую вас, друзья. В этой статье мы начнем с вами изучение событий в jQuery. Прежде всего, нас интересуют наиболее распространенные события, связанные с мышью: событие клика, событие движения курсора мыши и т.д. Начнем?
Итак, мы с вами уже можем осуществлять выборку элементов и даже производить некоторые действия с выбранными элементами. Однако, пока что от этого пользы немного. Хотелось бы большей интерактивности, т.е. хотелось бы производить эти действия в ответ на некоторые действия пользователя, т.е. при наступлении того или иного события.
Например, при клике мышью по кнопке показать скрытый элемент, при клике по превью — открыть оригинальное изображение в модальном окне, при получении элементом формы фокуса показать подсказку и много другое. Все это как раз и становится возможным благодаря работе с событиями в jQuery.
Начнем с простейшего и наиболее часто используемого события — события клика. За данное событие отвечает метод click, который принимает параметром функцию обратного вызова (callback функцию). Внутри callback функции мы и можем описать код, который выполнится в ответ на клик.
Давайте создадим ссылку и оформим ее в виде кнопки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .btn{ border: 1px solid transparent; cursor: pointer; font-size: 14px; padding: 6px 12px; text-align: center; text-decoration: none; } .btn-success{ background-color: #5cb85c; border-color: #4cae4c; color: #fff; } </style> <a href="#" class="btn btn-success">Кнопка</a> |
А теперь отследим событие клика по ссылке. В ответ на клик будем выводить в консоль строку приветствия.
|
1 2 3 |
$('a').click(function(){ console.log('Hello!'); }); |
Теперь, кликнув по ссылке, мы увидим в консоли строку hello. Однако также произойдет и переход по ссылке. Сейчас в атрибуте href у нас стоит символ решетки, поэтому мы остаемся на текущей странице, но сам символ добавляется в адресную строку. Если бы вместо решетки в ссылке был прописан реальный адрес, тогда произошел бы переход уже на другую страницу. Этого нам не нужно, поэтому часто при работе с событием клика необходимо отменить дефолтное поведение элемента при клике. При клике по ссылке это, соответственно, будет переход по ссылке.
Отменить поведение по умолчанию можно двумя способами. Первый способ — передать параметром в callback функцию объект события и вызвать для него метод preventDefault:
|
1 2 3 4 |
$('a').click(function(e){ console.log('Hello!'); e.preventDefault(); }); |
Другой способ — вернуть в функции false:
|
1 2 3 4 |
$('a').click(function(){ console.log('Hello!'); return false; }); |
Оба способа дадут один и тот же результат. Чаще используется второй способ, он короче. Однако между ними есть некоторый нюанс, связанный со всплытием события к родительскому элементу, из-за которого иногда приходится использовать первый способ. Собственно, бывает и наоборот, из-за некоторого нюанса сторонникам первого способа приходится обращаться ко второму или же использовать дополнительно метод stopPropagation. Но пока что мы не будем останавливаться на данном нюансе дабы не загружать лишними пока что сведениями.
А теперь давайте для закрепления попробуем добавить некоторый переключатель для кнопки, изменяя ее цвет при клике.
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ $('a').click(function(){ if($(this).hasClass('btn-success')){ $(this).removeClass('btn-success').addClass('btn-primary'); }else{ $(this).removeClass('btn-primary').addClass('btn-success'); } return false; }); }); |
Здесь нам нужно познакомиться с новым методом hasClass. Он проверяет, имеет ли элемент указанный класс, возвращая true (имеет) или false (не имеет) в зависимости от результат проверки. Также познакомимся с конструкцией $(this). Внутри функции она указывает на объект, с которым мы работаем, т.е. на ссылку в данном случае.
Итак, мы проверяем: если текущий элемент имеет класс btn-success, тогда мы удаляем его и присваиваем класс btn-primary. В противном случае делаем наоборот, удаляем класс btn-primary и добавляем класс btn-success.
Попробуйте, теперь по клику кнопка будет изменять цвет с одного на другой и наоборот. На этом мы завершим текущую статью. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!
