addEventListener i obiekt Event
Dołączaj nasłuchiwacze zdarzeń, odbieraj obiekt Event, używaj preventDefault i stopPropagation oraz poznaj propagację zdarzeń w górę.
addEventListener i obiekt Event to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym są zdarzenia?
Zdarzenia to sygnały wysyłane przez przeglądarkę, gdy coś się dzieje: użytkownik klika, naciska klawisz, porusza myszą, strona się ładuje lub żądanie sieciowe zostaje ukończone. JavaScript reaguje na zdarzenia przez dołączanie nasłuchiwaczy zdarzeń.
Składnia addEventListener
element.addEventListener(type, handler) dołącza funkcję, która ma zostać uruchomiona po wystąpieniu zdarzenia. Procedura obsługi otrzymuje obiekt Event zawierający szczegóły dotyczące zdarzenia.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});Typowe rodzaje zdarzeń
Myszy: click, dblclick, mouseenter, mouseleave, mousemove. Klawiatury: keydown, keyup, keypress. Formularzy: submit, input, change, focus, blur. Dokumentu: DOMContentLoaded, load. Okna: resize, scroll.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));Obiekt zdarzenia
Każda procedura obsługi otrzymuje obiekt Event. Najważniejsze właściwości: e.target (element, który wywołał zdarzenie), e.currentTarget (element, na którym znajduje się nasłuchiwacz), e.type (nazwa zdarzenia), e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault() zatrzymuje domyślne działanie przeglądarki. Należy użyć go, aby zapobiec wysłaniu formularza, nawigacji po kliknięciu odnośnika lub wyświetleniu menu kontekstowego po kliknięciu prawym przyciskiem w grze.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation() zatrzymuje propagację zdarzenia w górę drzewa DOM. Należy użyć go, gdy procedura obsługi elementu wewnętrznego nie powinna uruchamiać procedury obsługi elementu zewnętrznego.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});Bąbelkowanie zdarzeń
Zdarzenia propagują się w górę — po wywołaniu na elemencie docelowym są wywoływane na elemencie nadrzędnym, następnie na jego rodzicu, aż do document. Tak działa delegowanie zdarzeń: należy dołączyć jeden nasłuchiwacz do elementu nadrzędnego i użyć e.target, aby zidentyfikować faktycznie kliknięte dziecko.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});Wzorzec delegowania zdarzeń
Delegowanie zdarzeń polega na nasłuchiwaniu na elemencie nadrzędnym zamiast dołączania nasłuchiwaczy do każdego elementu potomnego. Jest wydajniejsze i automatycznie obsługuje dynamicznie dodawane elementy potomne.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});Zdarzenia klawiatury
Zdarzenia klawiatury występują podczas naciskania klawiszy. W nowoczesnym kodzie należy używać e.key (napisów takich jak 'Enter', 'Escape', 'a'). W starszym kodzie używano e.keyCode (przestarzałego). Właściwości e.metaKey, e.ctrlKey i e.shiftKey wykrywają klawisze modyfikujące.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});Usuwanie nasłuchiwaczy zdarzeń
Do odłączenia nasłuchiwacza należy użyć removeEventListener. Procedura obsługi musi być tą samą referencją do funkcji — funkcji anonimowych nie można usunąć. W React/Vue zazwyczaj nie trzeba zarządzać tym ręcznie.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);Opcja once
Przekazanie { once: true } jako trzeciego argumentu powoduje automatyczne usunięcie nasłuchiwacza po jego jednokrotnym wywołaniu. Jest to przydatne w przypadku działań wykonywanych tylko raz, takich jak zamknięcie ekranu powitalnego.
document.querySelector('#start').addEventListener('click', startApp, { once: true });Opcja capture
Domyślnie nasłuchiwacze są uruchamiane w fazie bąbelkowania (w górę). Przekazanie { capture: true } powoduje ich uruchamianie w fazie przechwytywania (w dół, przed własnymi nasłuchiwaczami elementu docelowego).
Szybkie sprawdzenie
Która metoda powstrzymuje przeglądarkę przed wykonaniem domyślnego działania dla zdarzenia?
Podsumowanie: zdarzenia DOM
addEventListener(type, handler) dołącza nasłuchiwacze. Obiekt Event udostępnia właściwość target, typ zdarzenia oraz metody sterujące. preventDefault() blokuje domyślne działania. stopPropagation() zatrzymuje bąbelkowanie. Delegowanie zdarzeń zwiększa wydajność i obsługuje dynamiczne elementy potomne. Należy usuwać nasłuchiwacze, aby zapobiegać wyciekom pamięci.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „addEventListener i obiekt Event” jest bezpłatna?
Tak — pełny tekst „addEventListener i obiekt Event” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „addEventListener i obiekt Event”?
Dołączaj nasłuchiwacze zdarzeń, odbieraj obiekt Event, używaj preventDefault i stopPropagation oraz poznaj propagację zdarzeń w górę. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „addEventListener i obiekt Event”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- querySelector i querySelectorAll
- addEventListener i obiekt Event
- Zmiana treści: textContent, innerHTML, classList
- Tworzenie i dołączanie elementów