Temat 9: Zdarzenia w JavaScript – onLoad, onUnload, mysz i klawiatura
📘 Teoria
Zdarzenia w JavaScript to akcje wykonywane przez użytkownika lub przeglądarkę, na które można odpowiednio zareagować za pomocą kodu. Przykładami zdarzeń są: załadowanie strony, kliknięcie myszą, najechanie kursorem, opuszczenie elementu, wpisanie znaku z klawiatury lub wysłanie formularza.
- onLoad – wykonywane po pełnym załadowaniu strony.
- onUnload – wykonywane przy opuszczaniu strony.
- onMouseOver – wykonywane po najechaniu kursorem na element.
- onMouseOut – wykonywane po opuszczeniu elementu kursorem myszy.
- onClick – wykonywane po kliknięciu elementu.
- onKeyPress – wykonywane po naciśnięciu klawisza.
- onKeyDown – wykonywane w momencie wciskania klawisza.
- onKeyUp – wykonywane po puszczeniu klawisza.
Procedurę obsługi zdarzenia można wpisać bezpośrednio w znaczniku HTML albo przypisać do zdarzenia funkcję JavaScript. W zadaniach egzaminacyjnych częściej spotyka się rozwiązanie z funkcją, ponieważ jest ono bardziej czytelne.
<button onclick="alert('Kliknięto przycisk')">Kliknij</button>
function komunikat() {
alert("Kliknięto przycisk");
}
<button onclick="komunikat()">Kliknij</button>
📊 Tabela zdarzeń wymaganych na egzaminie
| Zdarzenie | Element | Działanie |
|---|---|---|
| 📄 onLoad | body | wykonanie kodu po załadowaniu strony |
| 📄 onUnload | body | wykonanie kodu przy opuszczaniu strony |
| 🖱️ onMouseOver | dowolny element | najechanie kursorem myszy |
| 🖱️ onMouseOut | dowolny element | opuszczenie elementu kursorem myszy |
| 🖱️ onClick | dowolny element | kliknięcie elementu |
| ⌨️ onKeyPress | input, dokument | naciśnięcie klawisza |
| ⌨️ onKeyDown | input, dokument | wciśnięcie klawisza |
| ⌨️ onKeyUp | input, dokument | puszczenie klawisza |
🧪 Ćwiczenie 1 – zdarzenie onLoad
Zdarzenie onLoad wykonuje kod po pełnym załadowaniu strony. Można je wykorzystać np. do wyświetlenia powitania.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>onLoad</title>
</head>
<body onload="alert('Cześć! Miło, że odwiedziłeś moją stronę')">
<h1>Moja strona WWW</h1>
</body>
</html>
🧪 Ćwiczenie 2 – zdarzenie onUnload
Zdarzenie onUnload uruchamia się przy opuszczaniu strony. Można je wykorzystać do wyświetlenia komunikatu pożegnalnego.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>onUnload</title>
</head>
<body onunload="alert('Do widzenia! Mamy nadzieję, że niedługo znów nas odwiedzisz!')">
<h1>Moja strona WWW</h1>
</body>
</html>
🧪 Ćwiczenie 3 – powitanie i pożegnanie użytkownika
W tym przykładzie strona pyta użytkownika o imię, wyświetla powitanie, a przy opuszczaniu strony pokazuje komunikat pożegnalny.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Powitanie użytkownika</title>
<script>
let imie = "";
function podajImie() {
imie = prompt("Podaj swoje imię:", "");
if (imie == null || imie == "") {
imie = "brak";
document.write("Miło, że jesteś z nami!<br>");
document.write("Mamy nadzieję, że znajdziesz tu coś ciekawego.");
} else {
document.write("Miło, że jesteś z nami " + imie + "!<br>");
document.write("Mamy nadzieję, że znajdziesz tu coś ciekawego.");
}
}
function powitanie() {
if (imie == "brak") {
alert("Cześć! Witamy na naszej stronie!");
} else {
alert("Cześć! Witamy na naszej stronie " + imie + "!");
}
}
function pozegnanie() {
if (imie == "brak") {
alert("Do widzenia! Mamy nadzieję, że niedługo znów nas odwiedzisz.");
} else {
alert("Do widzenia " + imie + "! Mamy nadzieję, że niedługo znów nas odwiedzisz.");
}
}
</script>
</head>
<body onload="powitanie()" onunload="pozegnanie()">
<h2>
<script>
podajImie();
</script>
</h2>
</body>
</html>
🖱️ Ćwiczenie 4 – onMouseOver
Zdarzenie onMouseOver zachodzi wtedy, gdy użytkownik najedzie kursorem myszy na element.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>onMouseOver</title>
</head>
<body>
<h2>
<p onmouseover="alert('Najechałeś myszą na tekst!')">
Przykładowy tekst
</p>
</h2>
</body>
</html>
🖱️ Ćwiczenie 5 – zamknięcie okna po kliknięciu
Zdarzenie onClick może uruchomić funkcję po kliknięciu odnośnika lub przycisku.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>onClick</title>
</head>
<body>
<a href="#" onclick="window.close()">Zamknij okno</a>
</body>
</html>
Uwaga: współczesne przeglądarki mogą blokować zamykanie okien, jeśli nie zostały otwarte przez JavaScript.
🖱️ Ćwiczenie 6 – potwierdzenie przejścia na inną stronę
Funkcja confirm() zwraca wartość true, jeśli użytkownik kliknie OK, lub false, jeśli kliknie Anuluj.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Confirm</title>
<script>
function obslugaZdarzenia() {
if (confirm("Czy na pewno chcesz przejść na stronę http://wp.pl?")) {
window.location.href = "http://wp.pl";
}
}
</script>
</head>
<body>
<form>
<input type="button" value="wp.pl" onclick="obslugaZdarzenia()">
</form>
</body>
</html>
🖱️ Ćwiczenie 7 – pasek stanu
W starszych przykładach JavaScript wykorzystywano właściwość window.status do zmiany tekstu na pasku stanu przeglądarki. Obecnie wiele przeglądarek ogranicza działanie tej funkcji, ale nadal warto znać jej zastosowanie historyczne i egzaminacyjne.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Pasek stanu</title>
<script>
function obslugaPaskaStanu() {
window.status = "Strona Wydawnictwa Helion";
}
function obslugaKlikniecia() {
window.status = "Otwieram nową stronę";
}
</script>
</head>
<body>
<h2>
<a href="http://helion.pl"
onclick="obslugaKlikniecia(); return true;"
onmouseover="obslugaPaskaStanu(); return true;">
Strona wydawnictwa Helion
</a>
</h2>
<script>
window.defaultStatus = "Przykładowa strona z obsługą skryptów";
</script>
</body>
</html>
⌨️ Zdarzenia klawiatury
| Zdarzenie | Opis |
|---|---|
| ⌨️ onKeyPress | występuje po naciśnięciu klawisza |
| ⌨️ onKeyDown | występuje w momencie wciskania klawisza |
| ⌨️ onKeyUp | występuje po puszczeniu klawisza |
⌨️ Ćwiczenie 8 – onkeypress i identyfikacja pola
Skrypt wyświetla informację, w którym polu użytkownik nacisnął klawisz.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>onkeypress</title>
<script>
function przechwycZdarzenie() {
var pole1 = document.getElementById("pole1");
var pole2 = document.getElementById("pole2");
pole1.onkeypress = wcisnieto;
pole2.onkeypress = wcisnieto;
function wcisnieto() {
alert("Wciśnięto klawisz w " + this.id);
}
}
window.onload = przechwycZdarzenie;
</script>
</head>
<body>
<input type="text" id="pole1">
<input type="text" id="pole2">
</body>
</html>
⌨️ Ćwiczenie 9 – onkeyup i bieżące wyświetlanie tekstu
Zdarzenie onkeyup działa po puszczeniu klawisza, dlatego nadaje się do bieżącego wyświetlania wpisywanej treści.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>onkeyup</title>
<script>
function przechwycZdarzenie() {
var pole1 = document.getElementById("pole1");
pole1.onkeyup = wartosc;
function wartosc() {
document.getElementById("status").innerHTML = this.value;
}
}
window.onload = przechwycZdarzenie;
</script>
</head>
<body>
<input id="pole1">
<span id="status"></span>
</body>
</html>
⌨️ Ćwiczenie 10 – onkeydown
Zdarzenie onkeydown jest wywoływane w momencie wciskania klawisza. W praktyce może pokazywać wartość pola z opóźnieniem jednego znaku, ponieważ znak dopiero jest wprowadzany.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>onkeydown</title>
<script>
function przechwycZdarzenie() {
var pole1 = document.getElementById("pole1");
pole1.onkeydown = wartosc;
function wartosc() {
document.getElementById("status").innerHTML = this.value;
}
}
window.onload = przechwycZdarzenie;
</script>
</head>
<body>
<input id="pole1">
<span id="status"></span>
</body>
</html>
🧠 Ćwiczenia dla ucznia
- Utwórz stronę, która po załadowaniu wyświetli okno powitalne.
- Utwórz stronę, która przy opuszczaniu pokaże komunikat pożegnalny.
- Zapytaj użytkownika o imię i wyświetl spersonalizowane powitanie.
- Po najechaniu myszą na tekst wyświetl komunikat alert.
- Po kliknięciu przycisku zapytaj użytkownika, czy chce przejść na inną stronę.
- W dwóch polach tekstowych wykrywaj naciśnięcie klawisza i pokazuj nazwę pola.
- W polu tekstowym wyświetlaj wpisywany tekst obok pola.
- Porównaj działanie onkeydown i onkeyup.
📊 Zadania egzaminacyjne
Zadanie 1
Na ćwiczeniowej stronie internetowej umieść skrypty obsługujące zdarzenia z ćwiczeń od 1 do 10. Strona powinna mieć czytelny układ, nagłówki i oddzielone sekcje.
Zadanie 2
Napisz skrypt „kalkulator”, który po wpisaniu dwóch liczb i wybraniu działania wykonuje: dodawanie, odejmowanie, mnożenie i dzielenie. Wynik ma zostać wyświetlony na stronie.
let a = Number(document.getElementById("a").value);
let b = Number(document.getElementById("b").value);
let dzialanie = document.getElementById("dzialanie").value;
if (dzialanie == "+") {
document.getElementById("wynik").innerHTML = a + b;
}
📝 Test (10 pytań)
1. onLoad wykonuje się:
2. onUnload wykonuje się:
3. onMouseOver oznacza:
4. onMouseOut oznacza:
5. onClick występuje po:
6. confirm() zwraca:
7. window.location.href służy do:
8. onKeyUp działa:
9. this.id oznacza:
10. innerHTML służy do: