47. Zdarzenia myszy i klawiatury

Wprowadzenie do zdarzeń myszy i klawiatury

Zdarzenia myszy i klawiatury są kluczowe dla tworzenia interaktywnych stron internetowych. Dzięki nim można reagować na działania użytkownika, takie jak kliknięcia, przesuwanie kursora, naciskanie klawiszy czy przewijanie strony. JavaScript umożliwia obsługę tych zdarzeń, co pozwala na tworzenie dynamicznych i responsywnych aplikacji.

Wskazówka dla PhpStorm: Możesz użyć skrótu Alt + Insert, aby szybko dodać obsługę zdarzenia w kodzie JavaScript.
Zdarzenia myszy

Zdarzenia myszy pozwalają na reagowanie na interakcje użytkownika z myszką. Oto najczęściej używane zdarzenia:

  • click – pojedyncze kliknięcie lewym przyciskiem myszy.
  • dblclick – podwójne kliknięcie lewym przyciskiem myszy.
  • mousedown – naciśnięcie przycisku myszy.
  • mouseup – zwolnienie przycisku myszy.
  • mousemove – ruch kursora myszy.
  • mouseover – kursor myszy znajduje się nad elementem.
  • mouseout – kursor myszy opuszcza element.
Przykład: Obsługa kliknięcia
const przycisk = document.getElementById("myButton");
przycisk.addEventListener("click", () => {
  alert("Przycisk został kliknięty!");
});
Przykład: Obsługa ruchu myszy
document.addEventListener("mousemove", (e) => {
  console.log(`Pozycja kursora: X=${e.clientX}, Y=${e.clientY}`);
});
Zdarzenia klawiatury

Zdarzenia klawiatury umożliwiają reagowanie na naciskanie klawiszy przez użytkownika. Oto najważniejsze zdarzenia:

  • keydown – klawisz został naciśnięty.
  • keyup – klawisz został zwolniony.
  • keypress – klawisz został naciśnięty i zwolniony (nie działa dla wszystkich klawiszy).
Przykład: Obsługa naciskania klawiszy
document.addEventListener("keydown", (e) => {
  console.log(`Naciśnięto klawisz: ${e.key}`);
});
Przykład: Reagowanie na konkretny klawisz
document.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    alert("Naciśnięto Enter!");
  }
});
Obiekt zdarzenia

Podczas obsługi zdarzeń, funkcja obsługi (ang. *event handler*) otrzymuje obiekt zdarzenia (ang. *event object*), który zawiera informacje o zdarzeniu. Obiekt ten ma wiele przydatnych właściwości, takich jak:

  • target – element, na którym nastąpiło zdarzenie.
  • clientX, clientY – pozycja kursora myszy względem okna przeglądarki.
  • key – nazwa naciśniętego klawisza.
  • ctrlKey, shiftKey, altKey – informacja o naciśniętych klawiszach modyfikujących.
Przykład: Wykorzystanie obiektu zdarzenia
document.addEventListener("click", (e) => {
  console.log(`Kliknięto element: ${e.target.tagName}`);
  console.log(`Pozycja kursora: X=${e.clientX}, Y=${e.clientY}`);
});
Zapobieganie domyślnym działaniom

Czasami chcemy zapobiec domyślnemu zachowaniu przeglądarki, np. przeładowaniu strony po kliknięciu linku. Możemy to zrobić za pomocą metody preventDefault() obiektu zdarzenia.

Przykład: Zapobieganie domyślnemu działaniu
document.querySelector("a").addEventListener("click", (e) => {
  e.preventDefault();
  alert("Przejście do linku zostało zablokowane!");
});
Praktyczne zastosowania

Zdarzenia myszy i klawiatury mają wiele praktycznych zastosowań, takich jak:

  • Tworzenie interaktywnych menu i przycisków.
  • Implementacja skrótów klawiszowych.
  • Tworzenie gier i animacji reagujących na ruch myszy.
  • Walidacja formularzy w czasie rzeczywistym.
Wskazówka dla PhpStorm: Podczas debugowania kodu JavaScript w PhpStorm, możesz użyć Ctrl + D, aby szybko uruchomić debugowanie i śledzić zdarzenia krok po kroku.
Podsumowanie

Zdarzenia myszy i klawiatury są niezbędne do tworzenia interaktywnych i responsywnych stron internetowych. Dzięki JavaScript możemy reagować na różne interakcje użytkownika, co pozwala na tworzenie bardziej zaawansowanych i przyjaznych dla użytkownika aplikacji.

Uwaga: Pamiętaj, że nadmierne używanie zdarzeń może wpłynąć na wydajność strony. Zawsze staraj się optymalizować kod, np. poprzez używanie delegowania zdarzeń (ang. *event delegation*).