Obsługa zdarzeń w JavaScript

Aby dodać słuchacza zdarzeń w JavaScript, używamy metody „addEventListener()„. Ta metoda pozwala nam rejestrować funkcje obsługi zdarzeń dla określonego typu zdarzenia, takiego jak kliknięcie myszą, naciśnięcie klawisza, czy zmiana wartości pola wejściowego. Oto przykład, jak to zrobić:

W tym przykładzie „addEventListener()” rejestruje funkcję obsługi zdarzeń dla kliknięcia przycisku o id „myButton”. Po kliknięciu przycisku zostanie wywołana funkcja anonimowa, która wyświetla wiadomość w konsoli.

Możemy również dodać więcej niż jednego słuchacza dla tego samego zdarzenia na tym samym elemencie. Na przykład:

W tym przypadku oba słuchacze zdarzeń zostaną wywołane po kliknięciu przycisku.

Pamiętaj, że istnieje wiele różnych typów zdarzeń, takich jak „click”, „mouseover”, „keydown” itp., które możesz wykorzystać w addEventListener() w zależności od potrzeb aplikacji.

Aby usunąć słuchacza zdarzeń w JavaScript, możemy użyć metody removeEventListener(). Ta metoda pozwala nam usunąć wcześniej dodany słuchacz zdarzeń z elementu. Musimy jednak podać dokładnie taką samą funkcję obsługi zdarzeń oraz ten sam typ zdarzenia, który chcemy usunąć. Oto przykład:

W tym przykładzie najpierw dodajemy funkcję obsługi zdarzeń „handleClick” jako słuchacza zdarzeń dla kliknięcia przycisku. Następnie, za pomocą metody „removeEventListener()„, usuwamy tę samą funkcję „handleClick” jako słuchacza zdarzeń dla kliknięcia przycisku.

Ważne jest, aby przekazać tę samą funkcję obsługi zdarzeń, którą chcemy usunąć, oraz ten sam typ zdarzenia, który został użyty podczas dodawania słuchacza zdarzeń. Jeśli nie podamy dokładnie takich samych danych, „removeEventListener()” nie usunie słuchacza zdarzeń.

Inne typy zdarzeń:

W JavaScript istnieje wiele różnych typów zdarzeń, które mogą wystąpić podczas interakcji użytkownika z przeglądarką lub elementami na stronie internetowej. Poniżej znajduje się lista niektórych popularnych typów zdarzeń w JavaScript:

1. Eventy myszy:
   • click – Kliknięcie lewym przyciskiem myszy.
   • dblclick – Podwójne kliknięcie lewym przyciskiem myszy.
   • mouseover – Najechanie myszą na element.
   • mouseout – Odejście myszy z elementu.
   • mousedown – Naciśnięcie przycisku myszy na elemencie.
   • mouseup – Zwolnienie przycisku myszy na elemencie.
2. Eventy klawiatury:
   • keydown – Naciśnięcie klawisza na klawiaturze.
   • keyup – Zwolnienie klawisza na klawiaturze.
   • keypress – Naciśnięcie i zwolnienie klawisza na klawiaturze.
3. Eventy formularzy:
   • submit – Wysłanie formularza.
   • input – Wprowadzenie danych do pola formularza.
   • change – Zmiana wartości pola formularza.
4. Eventy dokumentu:
   • DOMContentLoaded – Wywoływane, gdy cały dokument został załadowany i sparsowany, bez czekania na załadowanie arkuszy stylów, obrazów i podramów.
   • load – Wywoływane, gdy cały dokument, wraz z zasobami, został załadowany.
   • resize – Zmiana rozmiaru okna przeglądarki.
5. Eventy multimediów:
   • play – Rozpoczęcie odtwarzania mediów.
   • pause – Wstrzymanie odtwarzania mediów.
6. Eventy czasowe:
   • setTimeout – Wywołanie funkcji po upływie określonego czasu.
   • setInterval – Wywołanie funkcji cyklicznie co określony czas.

To tylko kilka przykładów popularnych typów zdarzeń w JavaScript. Istnieje wiele innych zdarzeń, które można obsłużyć w zależności od potrzeb aplikacji. Każdy element DOM i obiekt JavaScript może generować różne typy zdarzeń, co daje programiście dużą elastyczność w obsłudze interakcji użytkownika.