Wszystko, co musisz wiedzieć o addEventListener w JavaScript

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

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