EventTarget.
Rejestruje funkcję wywoływaną za każdym razem, gdy na elemencie wystąpi zdarzenie, np. kliknięcie.
- Zwraca
undefined
Przykład
#const button = document.querySelector('#like')
let likes = 0
button.addEventListener('click', () => {
likes += 1
button.textContent = `Polubienia: ${likes}`
console.log('Kliknięto, polubienia:', likes)
})
button.click()
button.click()Dwa ostatnie wiersze symulują kliknięcia przez button.click(), żeby wynik pojawił się od razu. Kliknij przycisk w podglądzie, a w konsoli pojawią się kolejne wpisy.
Definicja i zastosowanie
#Metoda addEventListener() łączy zdarzenie z funkcją obsługi. Pierwszy argument to typ zdarzenia (np. "click", "input", "submit", "keydown"), a drugi to funkcja, która dostanie obiekt zdarzenia z informacjami o tym, co się stało.
Na jednym elemencie możesz zarejestrować wiele funkcji dla tego samego zdarzenia. Wykonają się w kolejności dodania. Metoda działa na elementach, ale też na document i window, np. przy obsłudze skrótów klawiszowych albo zmiany rozmiaru okna.
Trzeci argument to obiekt opcji: once: true usuwa obsługę po pierwszym wywołaniu, passive: true informuje przeglądarkę, że funkcja nie zablokuje przewijania, a signal pozwala odpiąć obsługę przez AbortController. Obsługę usuniesz też metodą removeEventListener(), ale musisz przekazać do niej tę samą funkcję, więc funkcja anonimowa się do tego nie nada.
Składnia
#target.addEventListener(type, listener)
target.addEventListener(type, listener, options)
target.removeEventListener(type, listener)Parametry
#type
napis
Typ zdarzenia, np."click","input","submit"albo"keydown". Bez przedrostkaon.listener
function (event)
Funkcja wywoływana przy każdym wystąpieniu zdarzenia. Dostaje obiekt zdarzenia.options
opcjonalny obiekt
Ustawienia:once,passive,captureisignal.
Więcej przykładów
#const bonus = document.querySelector('#bonus')
bonus.addEventListener('click', () => console.log('Bonus odebrany: +50 monet'), { once: true })
bonus.click()
bonus.click()const input = document.querySelector('#nick')
input.addEventListener('input', (event) => {
console.log(`Wpisano: ${event.target.value}`)
})
input.value = 'Ania'
input.dispatchEvent(new Event('input'))Zdarzenie input pojawia się przy każdej zmianie treści pola. Tutaj wywołujemy je ręcznie przez dispatchEvent(), a gdy wpiszesz coś w pole w podglądzie, konsola pokaże kolejne wartości.
const button = document.querySelector('#hint')
let used = 0
function showHint() {
used += 1
console.log(`Podpowiedź ${used} z 2`)
if (used === 2) button.removeEventListener('click', showHint)
}
button.addEventListener('click', showHint)
button.click()
button.click()
button.click()Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Przekazuj funkcję, a nie jej wynik:
addEventListener("click", save), a nieaddEventListener("click", save()). - Zamiast dodawać obsługę do każdego z wielu elementów, dodaj jedną do wspólnego rodzica i sprawdzaj
event.target. To tak zwane delegowanie zdarzeń. - Jeśli planujesz usunąć obsługę, zapisz funkcję w zmiennej.
removeEventListener()potrzebuje dokładnie tej samej funkcji.
Powiązane hasła
#- Event.targetElement, na którym faktycznie wystąpiło zdarzenie, np. kliknięty przycisk wewnątrz listy.
- Event.preventDefault()Blokuje domyślne działanie przeglądarki dla zdarzenia, np. wysłanie formularza lub przejście pod adres linku.
- EventTarget.removeEventListener()Odpina funkcję obsługi zdarzenia dodaną wcześniej przez addEventListener(). Wymaga tej samej funkcji i tego samego typu zdarzenia.
- Element.closest()Zwraca najbliższego przodka (lub sam element) pasującego do selektora CSS albo null.
- document.querySelector()Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
- () => {}Funkcja strzałkowa (arrow function): krótszy zapis funkcji, bez własnego this, z niejawnym return dla jednego wyrażenia.
Widzisz błąd albo brakuje przykładu? Napisz do nas.