Zdarzenia w JavaScripcie: addEventListener i obsługa zdarzeń

Zdarzenia to akcje, które może wywołać użytkownik: kliknięcie przycisku, wpisanie tekstu w formularzu i tak dalej. W JavaScripcie sięgamy po handlery zdarzeń, żeby uruchomić kod w odpowiedzi na te zdarzenia.

Popularne zdarzenia w JavaScripcie

Jest sporo zdarzeń, po które w JavaScripcie sięga się najczęściej. Oto kilka przykładów:

• click: wywoływane, gdy użytkownik kliknie element
• mouseover: wywoływane, gdy użytkownik najedzie myszą na element
• submit: wywoływane, gdy użytkownik wyśle formularz
• focus: wywoływane, gdy użytkownik ustawi fokus na elemencie (na przykład klikając w pole formularza)

Przy interakcji użytkownika wywoływanych jest wiele innych zdarzeń, takich jak „change”, „keyup”, „keydown” i tak dalej. Pełniejszą listę zdarzeń znajdziesz tutaj: https://www.gekkode.com/developpement/comprendre-et-travailler-avec-les-evenements-en-javascript/

Podpięcie handlera zdarzeń do elementu

Handler zdarzeń można podpiąć do elementu DOM na kilka sposobów. Pierwszy polega na użyciu właściwości samego elementu. Na przykład, żeby podpiąć obsługę kliknięcia do przycisku:

const button = document.querySelector('button');
button.onclick = function() {
    console.log('Bouton cliqué');
}

Można też skorzystać z metody addEventListener, która pozwala podpiąć do elementu kilka handlerów zdarzeń:

const input = document.querySelector('input');
input.addEventListener('focus', function() {
    console.log('Input focus');
});
input.addEventListener('blur', function() {
    console.log('Input blur');
});

Jest również metoda removeEventListener do usuwania handlera zdarzeń z elementu:

// nasza funkcja anonimowa
const maFonctionAnonyme = function() {
    console.log("Le bouton a été cliqué");
}

// Dodajemy nasze zdarzenie
document.getElementById('monBouton')
    .addEventListener('click', maFonctionAnonyme);

// Później w kodzie usuwamy to zdarzenie z takich czy innych powodów
document.getElementById('monBouton')
    .removeEventListener('click', maFonctionAnonyme);

W tym przykładzie handler zdarzenia „click” powiązany z funkcją „maFonctionAnonyme” zostanie usunięty z przycisku.

Podsumowanie

Dzięki zdarzeniom i ich obsłudze możesz tworzyć interakcje w czasie rzeczywistym na swojej stronie i uczynić ją bardziej dynamiczną i przyjemną dla użytkowników. Następny rozdział przedstawia moduły oraz import/eksport (ES6), które dzielą kod na pliki, klasy z kolei są omówione w artykule o klasach w JavaScripcie.