Jaki jest poprawny sposób uzyskania celu (target) zdarzenia w JavaScript?

By /

JavaScript

W programowaniu frontendowym, obsługa zdarzeń jest kluczowym elementem interakcji użytkownika z aplikacją webową. JavaScript oferuje rozbudowane możliwości w zakresie nasłuchiwania i reagowania na zdarzenia. Jednym z podstawowych aspektów obsługi zdarzeń jest uzyskanie dostępu do elementu, który było źródłem zdarzenia, czyli tzw. target zdarzenia. W tej lekcji przyjrzymy się, jak w prawidłowy sposób uzyskać cel zdarzenia w JavaScript.

Przykład: Uzyskiwanie celu zdarzenia

Aby zilustrować, jak uzyskać cel zdarzenia, stworzymy prosty przykład, w którym będziemy nasłuchiwać kliknięć na elementach listy i wyświetlać informację o tym, który element został kliknięty.

Kod HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Uzyskiwanie celu zdarzenia</title>
</head>
<body>
    <ul id="myList">
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ul>

    <script src="script.js"></script>
</body>
</html>
Kod JavaScript (script.js)
// Pobranie referencji do listy
const list = document.getElementById('myList');

// Dodanie nasłuchiwania na kliknięcie w elemencie listy
list.addEventListener('click', function(event) {
    // Uzyskanie elementu, który został kliknięty
    const targetElement = event.target;

    // Wyświetlenie informacji o klikniętym elemencie
    console.log('Kliknięty element:', targetElement.textContent);
});

Jak to działa?

  1. Pobranie referencji do listy: Najpierw pobieramy referencję do listy ul za pomocą metody getElementById. Pozwala to na manipulację listą i dodanie do niej nasłuchiwania zdarzeń.
  2. Dodanie nasłuchiwania na zdarzenie kliknięcia: Następnie dodajemy nasłuchiwacz zdarzeń do całej listy. Dzięki temu nie musimy dodawać osobnego nasłuchiwacza do każdego elementu listy li indywidualnie.
  3. Uzyskanie celu zdarzenia: Wewnątrz funkcji, która jest wywoływana podczas zdarzenia kliknięcia, używamy właściwości event.target, aby uzyskać dostęp do elementu, który został faktycznie kliknięty. Właściwość target zdarzenia zawsze odnosi się do elementu, na którym zdarzenie miało miejsce.
  4. Wyświetlenie informacji: Na koniec, za pomocą textContent uzyskujemy tekst zawarty w klikniętym elemencie i wyświetlamy go w konsoli.

Podsumowanie

Prawidłowe uzyskanie celu zdarzenia jest fundamentalnym aspektem obsługi zdarzeń w JavaScript. Umożliwia to nie tylko reagowanie na interakcje użytkownika, ale także dynamiczną manipulację elementami DOM w oparciu o te interakcje. Przykład pokazuje, jak łatwo można obsłużyć zdarzenia na wielu elementach, korzystając z jednego nasłuchiwacza zdarzeń i właściwości event.target. Dzięki temu podejściu kod jest bardziej zwięzły, czytelny i łatwiejszy w utrzymaniu.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top