
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ć, żeaddEventListener
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
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. |
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
te schabowe wychodzą przy każdym przykładzie 🙂 ale tak serio, bardzo przydatna ściąga 💪🏼
Jak najbardziej polecam materiały Majka 🙂
Fajna ściągawka, zapisana w pasku zadań, więc zawsze jest pod ręką, przydała się nie raz, dzięki wielkie 😀
Super artykuł, dzięki! 🙂