19. Обробка подій

Події "миші", зміна розмірів та прокрутка елементу

.click() - клік лівою кнопкую миші по об'єкту
.mouseover() i .mouseout() - події, що відбувається при внесенні курсору в межі об'єкту і винесенні за його межі. Нащадок (вкладений) блок викликає подію повторно
. mouseenter() i .mouseleave() - події, що відбуваються при внесенні курсору в межі об'єкту і винесенні за його межі (відповідно). Нащадок (вкладений) блок НЕ викликає подію повторно
.hover() - поєднав в собі .mouseenter() та .mouseleave(). Події, що відбуваються при внесенні курсору в межі об'єкту і винесенні за його межі. Нащадок (вкладений) блок не викликає подію повторно
.scroll() - подія генерується під час прокрутки елемента
.resize() - подія генерується під час зміни розміру елемента

Приклади

.click()

Клік лівою кнопкую миші по об'єкту

.dv

Клікаємо по блоку і змінюємо '?' на '!'

$('.dv div').click (function(){
	          $(this).text('!');
});

.mouseover() i .mouseout()

Події, що відбувається при внесенні курсору в межі об'єкту і винесенні за його межі. Нащадок (вкладений) блок викликає подію повторно

.dv

$('.dv').mouseover(function (){
	          $(this).css('border','3px solid red')
});
  
$('.dv').mouseout(function (){
	          $(this).css('border','3px solid blue')
});

.mouseenter() i .mouseleave()

Події, що відбувається при внесенні курсору в межі об'єкту і винесенні за його межі. Нащадок (вкладений) блок не викликає подію повторно

.dv

$('.dv').mouseenter(function (){
	           $(this).css('border','3px solid red')
});
  
$('.dv').mouseleave( function (){
	           $(this).css('border','3px solid blue')
});

У випадку коли всередині блоку є дочірній елемент, то mouseover() та mouseout() - спрацьовують також при переході на нього та з нього, хоча курсор все ще знаходиться в межах батьківського елементу
.mouseover() - при заході на елемент та повторно при заході на дочірній елемент
.mouseout() - при виході з елементу назовні і при переході на дочірній елемент, хоча батьківський елемент при цьому не покидається, а він просто перекривається дочірнім

.mouseenter() i .mouseleave() при переході з батьківського елементу на дочірній повторно не спрацьовують.

Демонстрація спрацювання .mouseout() при переході на дочірній блок

1) заведемо курсор на жовтий div використовуючи .mouseenter() (встановимо червоний бордер) і виведемо використовуючи mouseout(), назовні, (встановимо білий бордер)
2) заведемо курсор на жовтий div використовуючи .mouseenter() (встановимо червоний бордер) і виведемо, використовуючи mouseout(), на дочірній блок (встановимо білий бордер)

.dv

$('.dv').mouseenter( function (){ // не реагує на дочірній блок
	           $(this).css('border','3px solid red')
});

$('.dv').mouseout(function (){//  реагує на дочірній блок
	          $(this).css('border','3px solid white')
});

Приклад

Оберіть подію для великого жовтого блоку .bigblock, проведіть курсором по блоках і відслюдковуйте на індикаторі виникнення подій (кожна зміна кольору з жовтого на червоний та з червоного на жовтий) при переході через дочірні елементи

Подія - $('.bigblock')

.bigblock

.hover()

.hover() поєднав в собі .mouseenter() i .mouseleave(). Події відбуваються при внесенні курсору в межі об'єкту і винесенні за його межі. Нащадок (вкладений) блок не викликає подію повторно

.dv

$('.dv').hover(
                  function (){$(this).css('cursor','help')},
                  function (){$(this).css('cursor','default')}
);

.scroll()

Подія генерується під час прокрутки елемента

#bs Прокрутіть елемент.Подія генерується під час прокрутки елемента

$('#bs').scroll(function (){
	// показуємо та ховаємо червоний блок
      $('.indicator div').toggle();
});

.resize()

Подія генерується під час зміни розміру елемента

Плавно змінюйте розмір вікна браузера - елемент window

$(window).resize(function (){
	// показуємо та ховаємо червоний блок
      $('.indicator div').toggle();
});

далі ✏