Робота з подіями в jQuery. Частина 1

26

Від автора: вітаю вас, друзі. У цій статті ми почнемо з вами вивчення подій у jQuery. Перш за все нас цікавлять найбільш поширені події, пов’язані із мишкою: подія кліка, подія руху курсора миші і т. д. Почнемо?

Отже, ми з вами вже можемо здійснювати вибірку елементів і навіть виробляти деякі дії з вибраними елементами. Однак, поки що від цього користі небагато. Хотілося б більшої інтерактивності, тобто хотілося б виробляти ці дії у відповідь на дії користувача, тобто при настанні тієї чи іншої події.

Наприклад, при натисканні мишею по кнопці показати прихований елемент, при кліці по превью — відкрити оригінальне зображення в модальному вікні, при отриманні елементом форми фокуса показати підказку і багато іншого. Все це якраз і стає можливим завдяки роботі з подіями в jQuery.

Почнемо з найпростішого і найбільш часто використовуваного події — події кліка. За дане подія відповідає метод click, який приймає параметром функцію зворотного виклику (callback функцію). Всередині callback функції ми можемо описати код, який виконується у відповідь на клік.

Давайте створимо посилання і оформимо у вигляді кнопки:

.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;
}
Кнопка

А тепер простежимо подія кліка по посиланню. У відповідь на клік будемо виводити в консоль рядок привітання.

$(‘a’).click(function(){
console.log(‘Hello!’);
});

Тепер, клікнувши на посилання, ми побачимо в консолі рядок hello. Однак також відбудеться і перехід за посиланням. Зараз в атрибуті href у нас стоїть символ решітки, тому ми залишаємося на поточній сторінці, але сам символ додається в адресний рядок. Якщо б замість решітки на засланні був прописаний реальний адресу, тоді стався б перехід вже на іншу сторінку. Цього нам не потрібно, тому часто при роботі з подією кліка необхідно скасувати дефолтний поведінку елемента при кліці. При кліці по посиланню це, відповідно, буде перехід по посиланню.

Скасувати поведінку за промовчанням можна двома способами. Перший спосіб — передати параметром в callback функцію об’єкт події і викликати для нього метод preventDefault:

$(‘a’).click(function(e){
console.log(‘Hello!’);
e.preventDefault();
});

Інший спосіб — повернути у функції false:

$(‘a’).click(function(){
console.log(‘Hello!’);
return false;
});

Обидва способи дадуть один і той же результат. Частіше використовується другий спосіб, він коротший. Однак між ними є певний нюанс, пов’язаний з всплитием події до батьківського елементу, з-за якого іноді доводиться використовувати перший спосіб. Власне, буває і навпаки, за деякого нюансу прихильникам першого способу доводиться звертатися до другого або ж використовувати додатково метод stopPropagation. Але поки що ми не будемо зупинятися на цьому нюансі щоб не завантажувати зайвими поки що даними.

А тепер давайте для закріплення спробуємо додати деякий перемикач для кнопки, змінюючи її колір при кліці.

$(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у ви можете дізнатися з наших уроків або курсу. Удачі!