Temat 9: Zdarzenia w JavaScript
📘 Teoria
🔹 Czym są zdarzenia?
Zdarzenia (events) to akcje wykonywane przez użytkownika lub przeglądarkę, które mogą uruchamiać określony kod JavaScript.
- kliknięcie myszą
- najechanie kursorem
- wpisanie tekstu
- załadowanie strony
🔹 Podział zdarzeń
- 🖱️ zdarzenia myszy
- ⌨️ zdarzenia klawiatury
- 📄 zdarzenia dokumentu
- 📝 zdarzenia formularza
📊 Najważniejsze zdarzenia (pełny zakres egzaminacyjny)
| Zdarzenie | Rodzaj elementu | Działanie |
|---|---|---|
| onAbort | obraz | anulowanie ładowania grafiki |
| onBlur | okno, formularz | utrata aktywności pola |
| onChange | input, textarea | zmiana wartości |
| onClick | dowolny | kliknięcie |
| onDblClick | dowolny | podwójne kliknięcie |
| onDragDrop | okno | przeciągnięcie elementu |
| onError | obraz, okno | błąd ładowania |
| onFocus | formularz | aktywacja pola |
| onKeyDown | dokument | wciśnięcie klawisza |
| onKeyPress | dokument | naciśnięcie klawisza |
| onKeyUp | dokument | zwolnienie klawisza |
| onLoad | body | załadowanie strony |
| onMouseDown | przycisk, link | przytrzymanie myszy |
| onMouseOut | dowolny | opuszczenie obszaru |
| onMouseOver | dowolny | najechanie myszą |
| onMouseUp | dowolny | puszczenie przycisku myszy |
| onMove | okno | poruszanie oknem |
| onReset | formularz | czyszczenie formularza |
| onResize | okno | zmiana rozmiaru |
| onSelect | tekst | zaznaczenie tekstu |
| onSubmit | formularz | wysłanie formularza |
| onUnload | body | zamknięcie strony |
⚙️ Przykłady zdarzeń
🖱️ Kliknięcie
<button onclick="document.write('Kliknięto!')">Kliknij</button>
⌨️ Klawiatura
<input onkeydown="document.write('Klawisz!')">
🎨 Najechanie myszą
<h1 onmouseover="document.fgColor='red'">Najedź</h1>
📄 Załadowanie strony
<body onload="alert('Strona załadowana')">
📝 Formularz
<form onsubmit="alert('Wysłano')">
<input type="submit">
</form>
📦 Focus / Blur
<input onfocus="document.write('Aktywne')"
onblur="document.write('Utrata focus')">
⚙️ Przykład 1 – zdarzenie onload
function powitanie(){
let imie = prompt("Jak masz na imię?");
if(imie == "" || imie == null){
document.write("Witaj użytkowniku!");
}else{
document.write("Witaj " + imie);
}
}
Wywołanie:
<body onload="powitanie()">
🎨 Przykład 2 – zmiana koloru (mouseover)
function koloruj(x){
if(x==1){
document.fgColor = "blue";
}
if(x==2){
document.fgColor = "red";
}
}
<h1 onmouseover="koloruj(1)"
onmouseout="koloruj(2)">
PRZYKŁADOWY TEKST
</h1>
🧪 Przykład 44.2 – Zdarzenia myszy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zdarzenia w JS</title>
<script>
function koloruj(x)
{
if(x==1)
{
document.fgColor = "blue";
}
if(x==2)
{
document.fgColor = "red";
}
}
</script>
</head>
<body>
<h1 onmouseover="koloruj(1)"
onmouseout="koloruj(2)">
PRZYKŁADOWY TEKST
</h1>
</body>
</html>
👉 Najedź myszą – tekst zmieni kolor na niebieski
👉 Zabierz mysz – kolor wróci na czerwony
🧪 Przykład 44.3 – Aplikacja ze zdarzeniami
Aplikacja, która po kliknięciu określonego obrazka wyświetli nazwę zwierzątka i krótki wierszy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zdarzenia - aplikacja</title>
<script>
function papuga()
{
document.getElementById("wynik").innerHTML="PAPUGA";
document.getElementById("tresc").innerHTML=
"Papuzko, papuzko<br>Powiedz mi coś na uszko.<br>Nie powiem, boś ty plotkarz,<br>Powtórzysz każdemu, kogo spotkasz.";
}
function zyrafa()
{
document.getElementById("wynik").innerHTML="ŻYRAFA";
document.getElementById("tresc").innerHTML=
"Żyrafa tym głównie żyje,<br>że w górę wyciąga szyję.<br>Ja zazdroszczę żyrafie,<br>że nie potrafię.";
}
function krokodyl()
{
document.getElementById("wynik").innerHTML="KROKODYL";
document.getElementById("tresc").innerHTML=
"Skąd ty jesteś krokodylu?<br>Znad Nilu.<br>Wypuść mnie na kilka chwil,<br>to zawiozę cię nad Nil.";
}
function zebra()
{
document.getElementById("wynik").innerHTML="ZEBRA";
document.getElementById("tresc").innerHTML=
"Czy ta zebra jest prawdziwa?<br>Czy to tak naprawdę bywa?<br>Czy też malarz z bożej łaski<br>Pomalował osła w paski?";
}
function wilk()
{
document.getElementById("wynik").innerHTML="WILK";
document.getElementById("tresc").innerHTML=
"Powiem ci w słowach kilku,<br>Co myślę o tym wilku:<br>Gdyby nie był na obrazku,<br>zaraz by cię zjadł, głuptasku.";
}
</script>
</head>
<body>
<div id="tabela">
<table border="1">
<tr>
<td><img src="papuga.png" width="120" onclick="papuga()"></td>
<td><img src="zyrafa.png" width="120" onclick="zyrafa()"></td>
<td><img src="krokodyl.png" width="120" onclick="krokodyl()"></td>
<td><img src="zebra.png" width="120" onclick="zebra()"></td>
<td><img src="wilk.png" width="120" onclick="wilk()"></td>
</tr>
</table>
</div>
<hr>
<h2 id="wynik">Kliknij zwierzę</h2>
<p id="tresc"></p>
</body>
</html>
👉 Kliknięcie obrazka uruchamia funkcję
👉 Zmieniany jest tekst przez innerHTML
👉 To klasyczny przykład egzaminacyjny (zdarzenia + DOM)
📊 Przykładowe rozwiązanie zadania
🔍 Otwórz rozwiązanie🧠 Ćwiczenia
- Wyświetl komunikat po kliknięciu przycisku
- Zmień kolor tekstu po najechaniu myszą
- Wyświetl dane po wpisaniu w pole tekstowe
- Reaguj na naciśnięcie klawisza
- Wyświetl komunikat przy ładowaniu strony
<button onclick="alert('Kliknięto!')">Kliknij</button>
<h1 onmouseover="document.fgColor='red'">Test</h1>
<body onload="alert('Strona załadowana')">
📊 Zadania egzaminacyjne
- Utwórz przycisk, który po kliknięciu wyświetli komunikat „Witaj”.
- Zmodyfikuj tekst tak, aby zmieniał kolor po najechaniu kursorem.
- Utwórz formularz i wyświetl dane użytkownika po jego wysłaniu.
- Wykryj naciśnięcie klawisza i wyświetl jego kod.
- Utwórz galerię obrazów, gdzie kliknięcie wyświetla opis.
- Utwórz stronę, która po załadowaniu zapyta użytkownika o imię i wyświetli powitanie.
📝 Test (10 pytań)
1. onclick oznacza:
2. onmouseover:
3. onload:
4. zdarzenia służą do:
5. ondblclick:
6. onkeydown:
7. onsubmit:
8. zdarzenia wykonują:
9. JavaScript reaguje na:
10. event to: