Події (events)

$('p').click(function(e){ ... }); - добавити елементам обробник події кліка.

$('input.text').change(function(e){ ... }); - змінилося значення елемента форми (викликається при втраті фокуса).

$('input.text').focus(f).blur(f); - отримання та втрата фокуса елементом форми, посиланням.

$('input.text').hover(f, f); - ховер-ефект: дві функції на отримання і втрату ховера.

$('input.text').keydown(f).keyup(f).keypress(f); - події клавіатури.

$('img').mousedown(f).mouseup(f).mouseenter(f).mouseleave(f).mousemove(f)....; - події миші.

$('img').load(f); - елемент завантажено (використовується для ресурсів, документа).

$(document.body).ready(f).unload(f); - події готовності до використання, вигрузки елемента.

$(window).resize(f).scroll(f).beforeunload(f); - події на зміну розміра, скролл, закриття вкладки.

Робота з прослуховувальником подій

$('img').on('event_name', function(e){ ... }); - добавити елементам обробник події.

$('img').off('event_name'); - видалення обробника події.

$('img').one('event_name', function(event){ ... }); - обробник події спрацює лише один раз і сам автоматично видалиться.

.live(), .bind(), .deletage() - застарілі методи.

Делегація подій від батьківських елементів до дочірніх.

Наприклад, у нас динамічно створюються кнопки. Після створення кожної кнопки на неї потрібно вішати обробник подій:


				let $box = $('#buttonsBox');

				$('#masterButton').on('click', function(){

				  $('<button>Click me<button>')

				    .on('click', function(){ ... })

				    .appendTo($box);

				});

Можна піти іншим шляхом: обробник подій задати батьківському елементу, і вказати ціль, що викликатиме подію:


				$(parent).on(event, target, handler);


				let $box = $('#buttonsBox');

				$box.on('click', 'button', function(){ ... });

				$('#masterButton').on('click', function(){

				  $box.append('<button>Click me<button>');

				});

При кліку в межах батьківського елемента метод перевіряє який елемент знаходиться в event.target, перевіряє, чи підходить він під вказаний другим аргументом селектор, і якщо підходить, то подія викликається від його імені.