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

37

Від автора: вітаю вас, друзі. У цій статті ми продовжимо вивчення подій у jQuery. Ми вже познайомилися з досить корисним подією миші — mousemove, яке виникає при русі миші. У цій статті ми познайомимося з ще декількома подіями миші.

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

Познайомимося з подіями mouseover і mouseout. Перша подія — mouseover — виникає в той момент, коли миша з’являється в області елемента. Друга подія — mouseout — відбувається в момент відходу миші з області елемента. Давайте протестуємо. Візьмемо блок з исходников попереднього уроку:

І повісимо на нього два шуканих події:

$(‘.block’).mouseover(function(){
console.log(‘Миша з’явилася над елементом’);
}).mouseout(function(){
console.log(‘Миша пішла з елемента’);
});

Тепер при заході миші в область блоку ми побачимо в консолі відповідне повідомлення, а при виході — інше.

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

Тепер спробуємо доопрацювати скрипт з попереднього уроку. Насправді допрацьовувати багато і не доведеться, всього-то додати стеження за подією догляду миші — mouseout:

$(function(){
$(‘.block’).mousemove(function(e){
var top = e.pageY + 15,
left = e.pageX + 15;
$(‘.tooltip’).css({
«left»: left,
«top»: top,
«display»: «block»
});
}).mouseout(function(){
$(‘.tooltip’).css({
«display»: «none»
});
});
});

Коли настає подія mouseout, ми просто робимо блок підказки невидимим. Досить просто, не так. Разом з тим, незважаючи на простоту коду, ми реалізували досить ефектне рішення.

На цьому ми завершимо знайомство з подіями миші. У наступних статтях ми почнемо знайомитися з подіями клавіатури і подіями форм. Вихідні коди до статті можна завантажити за посиланням. Більше і jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!