Zyrex

JavaScript zdarzenia

Zdarzenia w JavaScript to akcje, które występują w odpowiedzi na coś, co dzieje się na stronie internetowej, takie jak kliknięcie przycisku, najechanie kursorem na element czy zmiana rozmiaru okna. Możesz obsługiwać zdarzenia za pomocą JavaScript, aby reagować na nie i wykonywać określone działania.

Przykłady zdarzeń w JavaScript:

• click – kliknięcie elementu
• mouseover – najechanie kursorem na element
• mouseout – opuszczenie elementu przez kursor
• submit – wysłanie formularza
• focus – uzyskanie focusa przez element (np. kursor w polu tekstowym)
• blur – utraty focusa przez element
• change – zmiana wartości elementu (np. zaznaczenie opcji w menu rozwijanym)

Przykład obsługi zdarzenia kliknięcia przycisku:

let button = document.getElementById("button");

button.addEventListener("click", function() {
  console.log("Przycisk został kliknięty");
});

W powyższym przykładzie za pomocą selektora DOM getElementById pobieramy przycisk o identyfikatorze button i dodajemy do niego nasłuchiwanie na zdarzenie kliknięcia za pomocą metody addEventListener. Po kliknięciu przycisku zostanie wywołana funkcja, która wyświetli wiadomość w konsoli.

Oto inny przykład obsługi zdarzenia, tym razem najechania kursorem na element:

let link = document.getElementById("link");

link.addEventListener("mouseover", function() {
  link.style.color = "red";
});

link.addEventListener("mouseout", function() {
  link.style.color = "black";
});

W powyższym przykładzie za pomocą selektora DOM getElementById pobieramy element <a> o identyfikatorze link i dodajemy do niego nasłuchiwanie na dwa zdarzenia: mouseover i mouseout. Po najechaniu kursorem na element kolor tekstu zostanie zmieniony na czerwony, a po opuszczeniu elementu zostanie zmieniony z powrotem na czarny.