Wszystko, co musisz wiedzieć o addEventListener w JavaScript

W

W tym artykule dowiesz się, czym jest addEventListener i jak z niego korzystać.
Poznasz popularne eventy oraz wskazówki, które pozwolą Ci pisać lepszy, bardziej zadbany kod.

Czym jest addEventListener?

addEventListener to metoda, dzięki której możemy wywołać jakąś funkcję w momencie, kiedy zostanie wykryte jakieś zdarzenie (event).
Zdarzeniem może być kliknięcie przycisku, przewinięcie strony czy najechanie kursorem na jakiś element.

Za pomocą “listenera” możemy obsługiwać zdarzenia wywołane myszą, klawiaturą czy zachowaniem samej strony internetowej (np. możemy wywołać funkcję dopiero po załadowaniu wszystkich elementów strony).

addEventListener możemy nadać na Document, obiekt Window czy pojedynczy element na naszej stronie.

Przykład:

/* Nakładamy listenera, który nasłuchuje na kliknięcie przycisku. 
Kiedy taki event zostanie zarejestrowany, zostanie wywołana funkcja, którą podaliśmy jaki drugi argument (może to być callback, może to być funkcja anonimowa).*/

const btn = document.querySelector('button')

btn.addEventListener('click', callback)

Wskazówki

  • Listenery trzymaj zawsze na samym dole kodu, pod wszystkimi funkcjami.
    Dzięki temu zachowasz porządek i unikniesz błędu, gdzie będziesz próbował/a uruchomić listenera przed zadeklarowaniem funkcji.
  • Unikaj funkcji anonimowych, staraj się zawsze przekazywać funkcje jako callbacki.
    Dzięki temu łatwiej pracować z kodem (szczególnie w większych projektach) oraz będzie można z takiej funkcji skorzystać w innym miejscu czy nawet innym listenerze (możemy więc oszczędzić mnóstwo linijek kodu).
  • Informacje zawarte w tym wpisie spokojnie wystarczą Ci do pracy z eventami.
    Warto jednak dodać, że addEventListener może przyjąć kilka opcjonalnych ustawień. Możesz o nich przeczytać na MDN, ale zostaw sobie tę lekturę na później.
    Najpierw opanuj do perfekcji “zwykłego” listenera. 😉

Popularne eventy

NazwaOpis
clickWykrywa kliknięcie myszą na element, zdecydowanie najczęściej wykorzystywany event
copyWykrywa kopiowanie treści (CMD + C / CTRL + C / PPM -> kopiuj)
keydownKlawisz na klawiaturze został wciśnięty (ale nie puszczony)
keyupKlawisz na klawiaturze został puszczony
mousemoveKursor porusza się po elemencie
mouseoverKursor znajduje się nad elementem, podobne do :hover w CSS
mouseenterKursor wjechał na element
mouseleaveKursor zjechał z elementu
scrollWykrywa zdarzenie scrolla (przewijania strony)
DOMContentLoadedStrona internetowa została wczytana (sam DOM, bez CSS, grafik itd.)
loadCała strona internetowa została wczytana (DOM, CSS, grafiki itd.)
Seria eventów ‘drag’Dragstart, dragend itd.
Dzięki nim możemy za pomocą myszy przenosić elementy.

Oczywiście powyższa tabelka prezentuje tylko kilka wybranych eventów.
Jeśli chcesz poznać resztę, sprawdź ten artykuł na MDN. W menu po lewej stronie znajdziesz sekcję Event z listą wszystkich eventów.

Przykłady

/* Funkcja podana jako callback zostanie wywołana dopiero, kiedy cały DOM zostanie załadowany. */
window.addEventListener('DOMContentLoaded', callback)


/* Do zmiennej btn pobraliśmy przycisk. Po jego kliknięciu, zobaczymy w konsoli napis "Cześć!". */
btn.addEventListener('click', () => console.log('Cześć'))


/* Do zmiennej nav pobraliśmy nawigację. Po najechaniu na nią, uruchomiona zostanie funkcja testFn. */
nav.addEventListener('mouseenter', testFn)

Chcesz nauczyć się tworzyć profesjonalne strony internetowe? Sprawdź nasze kursy! 🙂

www.MMCSchool.pl

O autorze

Majek

Właściciel MMC School & MMC World.
Wielki miłośnik kotletów schabowych, fan F1, piłki nożnej, technologii oraz muzyki.

komentarzy

Autor Majek