O lekcji
Zdarzenia to reakcje na akcje użytkownika, takie jak kliknięcie przycisku, najechanie myszą czy wprowadzenie tekstu.
Podstawowe zdarzenia
| Zdarzenie | Opis |
|---|---|
click |
Wykonywane po kliknięciu. |
mouseover |
Wykonywane po najechaniu myszą. |
keydown |
Wykonywane po naciśnięciu klawisza. |
input |
Wykonywane po wprowadzeniu danych do pola. |
Dodawanie obsługi zdarzeń
- Przypisywanie zdarzenia w HTML
<button onclick="kliknij()">Kliknij mnie</button>
<script>
function kliknij() {
alert("Przycisk został kliknięty!");
}
</script>
- Dodawanie zdarzenia w JavaScript za pomocą
addEventListener
const przycisk = document.querySelector("button");
przycisk.addEventListener("click", () => {
alert("Kliknięto przycisk!");
});
Przykłady zdarzeń
- Kliknięcie przycisku
const przycisk = document.querySelector("button");
przycisk.addEventListener("click", () => {
console.log("Przycisk został kliknięty!");
});
- Najechanie myszą
const tytul = document.querySelector("h1");
tytul.addEventListener("mouseover", () => {
tytul.style.color = "red";
});
- Wprowadzenie tekstu
<input type="text" id="poleTekstowe" placeholder="Wpisz coś...">
<script>
const pole = document.getElementById("poleTekstowe");
pole.addEventListener("input", (event) => {
console.log(`Wprowadzony tekst: ${event.target.value}`);
});
</script>
- Zdarzenia klawiatury
document.addEventListener("keydown", (event) => {
console.log(`Naciśnięty klawisz: ${event.key}`);
});