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 bardzo potężna metoda w JS. Dzięki niej możemy wywołać jakąś funkcję w momencie, kiedy zostanie wykryte zdarzenie (event).
Zdarzeniem może być kliknięcie przycisku, przewinięcie strony czy najechanie kursorem na jakiś element. To my sobie wybieramy, na jaki event „nasłuchujemy”.
Za pomocą addEventListener 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 oszczędzić mnóstwo linijek kodu). - Informacje zawarte w tym wpisie spokojnie wystarczą Ci do pracy z eventami.
Warto jednak dodać, żeaddEventListenermoże przyjąć kilka opcjonalnych ustawień. Możesz o nich przeczytać na MDN / omawiamy je w kursie JavaScript.
Natomiast to wiedza „na później”. Najpierw opanuj podstawy. 😉
Popularne eventy
| Nazwa | Opis |
|---|---|
| click | Wykrywa kliknięcie myszą na element, zdecydowanie najczęściej wykorzystywany event |
| copy | Wykrywa kopiowanie treści (CMD + C / CTRL + C / PPM -> kopiuj) |
| keydown | Klawisz na klawiaturze został wciśnięty (ale nie puszczony) |
| keyup | Klawisz na klawiaturze został puszczony |
| mousemove | Kursor porusza się po elemencie |
| mouseover | Kursor znajduje się nad elementem, podobne do :hover w CSS |
| mouseenter | Kursor wjechał na element |
| mouseleave | Kursor zjechał z elementu |
| scroll | Wykrywa zdarzenie scrolla (przewijania strony) |
| DOMContentLoaded | Strona internetowa została wczytana (sam DOM, bez CSS, grafik itd.) |
| load | Cał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. |
Powyższa tabelka prezentuje najpopularniejsze eventy, choć tych jest dużo więcej.
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)
