Event.target

Element, na którym faktycznie wystąpiło zdarzenie, np. kliknięty przycisk wewnątrz listy.

Zwraca: Element (lub inny obiekt), od którego zaczęło się zdarzenie.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

JavaScript

const answers = document.querySelector('#answers')

answers.addEventListener('click', (event) => {
  console.log('target:', event.target)
  console.log('currentTarget:', event.currentTarget)
  console.log('Wybrano odpowiedź', event.target.textContent)
})

answers.children[1].click()

Konsola

target: <li>

currentTarget: <ul id="answers">

Wybrano odpowiedź B

Ostatni wiersz symuluje kliknięcie w odpowiedź B. Kliknij inną odpowiedź w podglądzie, żeby zobaczyć, jak zmienia się target, a currentTarget zostaje ten sam.

Definicja i zastosowanie

Właściwość event.target wskazuje element, od którego zaczęło się zdarzenie, na przykład dokładnie ten przycisk czy element listy, który kliknął użytkownik. Obok niej jest event.currentTarget, czyli element, do którego podpięto aktualnie wykonywaną funkcję obsługi.

Różnica ma znaczenie, bo większość zdarzeń propaguje się w górę drzewa (tak zwane bąbelkowanie): kliknięcie w element listy uruchamia też obsługę na samej liście, jej rodzicu i dalej aż do document. Dzięki temu możesz podpiąć jedną funkcję do rodzica i sprawdzać event.target, zamiast dodawać obsługę do każdego dziecka. Ta technika nazywa się delegowaniem zdarzeń i działa także dla elementów dodanych później.

event.target może być elementem zagnieżdżonym głębiej, niż się spodziewasz, np. ikoną <span> wewnątrz przycisku. Dlatego przy delegowaniu zwykle szuka się właściwego elementu przez event.target.closest(selektor).

Składnia

event.target
event.currentTarget

Więcej przykładów

Delegowanie działa dla nowych elementów

JavaScript

const todo = document.querySelector('#todo')

todo.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('done')
    console.log(`${event.target.textContent}: ${event.target.className}`)
  }
})

const newItem = document.createElement('li')
newItem.textContent = 'Lekcja 2'
todo.append(newItem)

newItem.click()

Konsola

Lekcja 2: done

Kliknięcie w element zagnieżdżony

JavaScript

document.addEventListener('click', (event) => {
  console.log(event.target)
  console.log(event.target.closest('.like'))
})

document.querySelector('.icon').click()

Konsola

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

Przy delegowaniu zdarzeń używaj event.target.closest(selektor), bo kliknięcie mogło trafić w element zagnieżdżony, np. ikonę w przycisku.
W funkcji obsługi event.currentTarget zawsze wskazuje element z podpiętą obsługą, a event.target element faktycznie kliknięty.
W polach formularza wpisaną wartość odczytasz przez event.target.value.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz JavaScript w kursie JavaScript i ReactZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs