jQuery для чайників ч.2 - події

В минулій статті, ми почали розгляд основ jQuery, навчилися визначати типи даних та працювати з селекторами.

Проте, вміти вибирати елементи на сторінці - це дуже добре, але ще краще - знати як з ними працювати. Сьогодні ми розглянемо саме цей аспект.

Про що Ви сьогодні дізнаєтеся:

• Як використовувати подію **click**;
• Як використовувати подію **hover**;
• Як змінити css клас;

Натискання клавіші - подія Click

Найпростіший спосіб взаємодії з HTML-елементами є подія Click. Ви натискаєте на щось (наприклад. виділений елемент), і щось відбувається. Click в jQuery працює наступним чином:

    $("#target").on( "click", function() {
        alert("Codeguida one Love");
    });

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

    // задаємо змінну
    var $clickMeElement = $('#gallery li').eq(0);
     
    // використовуємо
    $clickMeElement.on( "click", function() {
        alert("Я люблю Codeguida");
    });

Це викличе javascript попередження, коли користувач натисне на першу картинку в #gallery.

Переміщення миші - подія Hover

Інша подія, з якою всі ми стикаємося сотні разів на день, це відслідковування миші.

Думаю кожен бачив слайд-шоу, яке працює тільки тоді, коли миша знаходиться в зоні вікна слайдів. При відведенні миші в іншу зону зміна кадрів припиняється. Ця зміна поведінки в залежності від положення покажчика і є подією Hover.

Це працює наступним чином:

    // визначаємо змінну
    var $hoverMeElement = $('#gallery li').eq(1);
     
    // використовуємо змінну
    $hoverMeElement.hover(
        function() {
            $(this).css('transform','rotate(90deg)');
        }, function() {
            $(this).css('transform','rotate(0)');
        }
    );

Цей фрагмент коду допоможе нам повернути друге зображення в #gallery на 90º при mouseenter і назад (0º) при mouseleave.

Зміна CSS класу при натисканні - ToggleClass подія

Ще одна дуже поширена подія на інтерактивних сайтах, це toggleClass. При виконанні певних дій, jQuery буде додавати або видаляти клас із зазначеного елемента.

`ToggleClass` подія в jQuery працює наступним чином:

    // визначаємо змінну
    var $toggleTrigger = $('#gallery li').eq(-1);
     
    // використовуємо цю змінну
    $toggleTrigger.click(function() {
      $(this).toggleClass("highlight");
    });

Це додасть клас .highlight до останнього елемента #gallery.

Ви можете оціниту роботу подій за допомогою цього Codepen:

{@codepen.io:awtAm}

Сьогодні Ви дізналися як виконувати базові дії за допомогою основних подій jQuery: Click, Hover і ToggleClass. Але це далеко не все, далі ще більше корисного та цікавого!