jQuery спрощує реагування на дії користувача з веб-сторінкою. Це означає, що ви можете написати код, який виконується, коли користувач клацає по певній частині сторінки або коли він переміщує курсор за межі елемента форми. Наприклад, цей код відстежує, що користувач клацнув на будь-який елемент <li> на сторінці:
<code data-language="javascript">$( 'li').click(function( event) { console.log( 'clicked', $( this).text()); });Цей код вибирає всі пункти списку на сторінці, потім пов'язує функцію обробника з подією клацання для кожного пункту списку за допомогою методу .click().
Такі методи як .click(), .blur(), .change() та інші є скороченими" методами зв'язування подій jQuery пропонує ряд таких скорочених методів, кожен з яких відповідає рідній події DOM:
| Рідне ім'я події | Скорочений метод |
|---|---|
| click | .click() |
| keydown | .keydown() |
| keypress | .keypress() |
| keyup | .keyup() |
| mouseover | .mouseover() |
| mouseout | .mouseout() |
| mouseenter | .mouseenter() |
| mouseleave | .mouseleave() |
| scroll | .scroll() |
| focus | .focus() |
| blur | .blur() |
| resize | .resize() |
Якщо залізти під капот, всі скорочені методи в jQuery використовуються методом .on(). Ви можете включити метод .on() у свій код; насправді він дає вам набагато більше гнучкості. Використовуючи .on(), ви передаєте рідне ім'я події як перший аргумент, а потім функцію обробника як другий аргумент:
<code data-language="javascript">$( 'li').on( 'click', function( event) { console.log( 'clicked', $( this).text()); });Після того, як до елемента «прив'язали» обробник подій, ви можете ініціювати його через jQuery.
<code data-language="javascript">$( 'li').trigger( 'click ');
Якщо у події, яку ви хочете ініціювати, є скорочений метод (див. таблицю вище), ви також можете ініціювати цю подію, просто викликаючи скорочений метод:
><code data-language="javascript">$( 'li').click();
Коли застосовується .trigger() ви тільки ініціюєте обробники подій, які пов'язані з JavaScript, але не ініціюєте стандартну поведінку для цієї події. Наприклад, якщо ви ініціюєте подію click для елемента <a>, автоматичного переходу за посиланням не відбудеться (хоча ви можете написати код, який це робитиме).
Після того, як ви прив'язали подію, її можна відв'язати за допомогою методу .off(). Це дозволить видалити будь-які обробники, які були прив'язані до певної події:
<code data-language="javascript">$( 'li').off( 'click');
Простір імен подій
Однією з переваг, які пропонує .on() — це можливість використовувати «простір імен» подій. Навіщо вам потрібно задіяти простір імен? Розглянемо ситуацію, коли ви прив'язуєте деякі події, а потім хочете скасувати прив'язку якихось обробників. Як ми вже бачили, ви можете зробити це таким чином:
Увага! Невдале рішення
<code data-language="javascript">$( 'li').on( 'click', function() { console.log( 'клацнули на елемент списку'); }) ; $( 'li').on( 'click', function() { registerClick(); doSomethingElse(); }); $( 'li').off( 'click');Однак це відв'яже всі обробники click для всіх елементів, чого нам не хочеться. Якщо ви прив'яжете обробник подій за допомогою простору імен подій, можна задати конкретні обробники подій:
<code data-language="javascript">$( 'li').on( 'click.logging', function() { console.log( 'клацнули по елементу списку'); }); $( 'li').on( 'click.analytics', function() { registerClick(); doSomethingElse();); $( 'li').off( 'click.logging');Цей код залишає недоторканим click для analytics, в той же час скасовуючи click для logging.
Ми також можемо використовувати простори імен, щоб ініціювати лише певні події:
<code data-language="javascript">$( 'li').trigger( 'click.logging');
Прив'язка кількох подій за раз
Ще однією перевагою .on() є можливість прив'язувати кілька подій одночасно. Наприклад, ви можете виконати один код, коли користувач прокручує вікно або коли користувач змінює розмір цього вікна. Метод .on() дозволяє передавати обидві події у вигляді рядка з пробілом — а потім викликати функцію, яка обробить обидві події:
<code data-language="javascript">$( 'input[type="text"]').on('focus blur', function() { console.log( 'Для поля <input> отримано або втрачено фокус'); }); $( window).on( 'resize.foo scroll.bar', function() { console.log( 'Вікно змінило розміри або прокручено!'); }); Іменована функція як обробник подій
Досі у всіх наших прикладах як обробник подій ми передавали анонімну функцію. Тим не менш, ви можете створити функцію заздалегідь і зберігати її в змінній, а потім передати цю змінну як обробник подій. Це корисно, якщо ви хочете використовувати один і той же обробник для різних подій або одну подію для різних елементів.
<code data-language="javascript">var handleClick=function() { console.log( 'на щось клацнули'); }; $( 'li').on( 'click', handleClick); $( 'h1').on( 'click', handleClick); Об'єкт події
Кожного разу, коли відбувається подія, функція обробника подій отримує один аргумент — Об'єкт події, стандартний у всіх браузерах. Цей об'єкт має багато корисних властивостей, у тому числі такі:
<code data-language="javascript">$( document).on( 'click', function( event) { console.log( event .type);//Тип події, наприклад click console.log( event.which); //Натиснута кнопка або клавіша console.log( event.target); //Джерело події console.log( event.pageX); /Координата миші по осі X console.log( event.pageY); //Координата миші по осі Y }); Всередині обробника подій
При вказівці функції, яка буде використовуватися як обробник подій, ця функція отримує доступ до вихідного елемента DOM, який ініціював подію. Якщо ви бажаєте використовувати jQuery для маніпуляцій з елементом, потрібно передати його $():
<code data-language="javascript">$( ' input').on( 'keydown', function( event) { //this: Елемент, з яким пов'язаний обробник подій //event: Об'єкт події //Змінити колір фону елемента <input> при натисканні на backspace //на червоний , інакше на зелений $( this).css( 'background', event.which===8 ? 'red' : 'green'); }); Скасування дії за промовчанням
Часто вам доведеться скасувати дію за промовчанням. Наприклад, ви хочете обробити клацання по елементу <a> за допомогою AJAX, а не викликати перезавантаження всієї сторінки. Щоб досягти цього, багато розробників змушують обробник події повертати false, але тут насправді є один побічний ефект: він зупиняє поширення події, що може мати непередбачувані наслідки. Правильний спосіб скасувати поведінку події за замовчуванням це викликати метод .preventDefault() об'єкта події.
<code data-language="javascript">$( 'a ').on( 'click', function( event) { //Скасуємо дію за умовчанням event.preventDefault(); //Виводимо console.log( 'По мені вже клацнули!'); });Це дозволяє нам використовувати «випливаючі» події, які ми досліджуємо нижче.
Спливаючі події
Розглянемо наступний код:
<code data-language="javascript">$( '*').add( [ document, window ]).on( 'click', function( event) { event.preventDefault(); console.log( this); }); Обробник клацання прив'язується до всіх елементів у документі (чого ви ніколи не повинні робити в реальному коді), а також для document та window. Що станеться, коли ви натисніть <a>, який знаходиться всередині інших елементів? Насправді подія click спрацює для елемента <a>, а також для всіх елементів, які містять <a> — весь шлях до document та window.
Така поведінка називається спливаюча подія — подія спрацьовує на елементі, по якому користувач клацнув і якщо ви не викличте .stopPropagation() для об'єкта події, то запуститься весь шлях вгору по DOM.
Ви можете побачити це більш наочно, коли проаналізуєте таку розмітку:
<code data-language="javascript"><a href="#foo" ;><span>Я посилання!</span></a> <a href="#bar"><b><i>І ти посилання?</i></b></a>
І наступний код:
<code data-language="javascript">$( 'a').on( 'click', function( event) { event.preventDefault(); console.log( $ ( this).attr( 'href')); });При натисканні на «Я посилання!» ви насправді клацаєте не на <a>, а на <span> всередині посилання. Водночас спливаюча подія дійде до <a> і спрацює пов'язаний з ним обробник click.
Делегування подій
Поведінка спливаючих подій дозволяє нам робити «делегування подій» — зв'язування обробників з елементами високого рівня, а потім визначення, які елементи низького рівня ініціювали подію. Так, ми могли б пов'язати подію з маркованим списком, а потім з'ясувати, який елемент ініціював подію:
<code data-language="javascript">$( '#my-unordered-list').on ( 'click', function( event) { console.log( event.target); //записуємо елемент, який викликав подію });Звичайно, якщо наш маркований список містить пункти, а вони у свою чергу містять іншу розмітку, при цьому ми насправді дбаємо лише про натиснутий пункт списку, то в метушні все це може виявитися неакуратним. На щастя, jQuery надає помічника, який дозволяє нам визначити, які елементи нам варто дбати, коли йде прив'язка до елемента високого рівня.
<code data-language="javascript">$( '#my-unordered-list').on( 'click', 'li', function( event) { console.log( this); //записуємо елемент, яким клацнули }); $( '<li>новий пункт списку!</li>').appendTo( '#my-unordered-list');Делегування подій має дві основні переваги. По-перше, це дозволяє нам прив'язувати менше обробників подій, ніж якби ми відстежували клацання окремими елементами; до того ж це може дати величезний приріст продуктивності. По-друге, це дозволяє нам прив'язати батьківські елементи на кшталт маркованого списку і наші обробники подій спрацьовуватимуть як очікувалося, навіть якщо зміниться вміст.
Наприклад, цей код додає новий елемент списку після налаштування делегування події; клацання по новому пункт працює чудово, без будь-яких додаткових подій.
<code data-language="javascript">$( '#my-unordered-list').on( 'click', ' li', function( event) { console.log( this); //записуємо елемент, на який клацнули }); $( '<li>новий пункт списку!</li>').appendTo( '#my-unordered-list'); Резюме
У цьому розділі ми розглянули різні способи взаємодії користувача з нашою сторінкою, у тому числі, як ми можемо використовувати делегування події більш ефективно. У наступному розділі ми перейдемо до анімації елементів за допомогою методів jQuery.
-name-field-book-tag field-type-taxonomy-term-reference field-label-hidden">