Spis poleceń HTML#
Zdarzenia#
Podczas korzystania z przeglądarki internetowej (przeglądając witryny WWW) generowana jest cała masa różnych zdarzeń. Może być to np. kliknięcie przycisku na dowolnym elemencie (click), wczytanie strony (load), zresetowanie formularza (reset) i wiele więcej. Każde takie zdarzenie można przechwycić za pomocą tzw. uchwytu zdarzenia, a następnie w odpowiedni sposób obsłużyć (podając właściwy kod do wykonania).
W specyfikacji HTML 4.01 zdefiniowano kilkanaście uchwytów zdarzeń (dokładnie 18), które powinny być interpretowane w każdej przeglądarce. Uchwyty można przypisywać bezpośrednio do elementów, jako kolejne atrybuty (wartością są polecenia do wykonania). Przykład:
<button onclick="alert('Witaj wędrowcze');">Kliknij mnie!</button>Z praktycznego punktu widzenia bezpośrednie umieszczanie kodu JS w atrybutach xHTML jest niewskazane, zawsze należy dążyć do zachowania podziału na główne warstwy.
Na dzień dzisiejszy istnieje więcej zdarzeń niż te, które podaje specyfikacja. Ponadto wprowadzono lepsze mechanizmy do ich obsługi (np. metoda addEventListener). Temat silnie powiązany jest z JavaScriptem oraz modelem DOM, czyli dotyczy bardziej zaawansowanych programistów. Kurs xHTML nie jest miejscem na szczegółowe omówienie zagadnienia. W tym miejscu zajmiemy się jedynie podstawami.
W poniższej tabeli znajduje się wykaz wszystkich 18 uchwytów zdarzeń, które zawarto w specyfikacji HTML 4.01.
Przykłady#
W przykładach wyjaśniających dane zdarzenie stosuję atrybuty w elementach xHTML. Mają one jedynie przybliżyć zagadnienie, umożliwić bezpośrednią interakcję i wybadanie mechanizmu (w Testerze Kodu Online). W rzeczywistych projektach zawsze stosuj elegantsze rozwiązania.
onload#
Zdarzenie zostanie wywołane gdy strona (ze wszystkimi zasobami, np. grafiką) zostanie wczytana. To samo dotyczy dokumentu zbudowanego na ramkach. Prosty przykład:
<html>
<head>
<title>Zdarzenie onload</title>
</head>
<body onload="alert('Strona wczytana!');">
<h1>Witaj wędrowcze!</h1>
</body>
</html>onunload#
Zdarzenie zostanie wywołane gdy strona zostanie zamknięta (ewentualnie wciśnięty zostanie klawisz F5). To samo dotyczy dokumentu zbudowanego na ramkach. Prosty przykład:
<html>
<head>
<title>Zdarzenie onunload</title>
</head>
<body onunload="alert('Opuściłeś właśnie najlepszą stronę WWW!');">
<p>Zamknij okno lub wciśnij klawisz F5.</p>
</body>
</html>onblur#
Zdarzenie zostanie wywołane w chwili, kiedy element traci fokus (zogniskowanie). Jest ono przeciwieństwem onfocus. Prosty przykład:
<p>Wprowadź kursor i opuść pole 1: <input type="text" onblur="alert('Opuściłeś pole 1');"></p>
<p>Wprowadź kursor i opuść pole 2: <input type="text" onblur="alert('Opuściłeś pole 2');"></p>onchange#
Zdarzenie zostanie wywołane w chwili, kiedy wartość elementu zostanie zmieniona. Prosty przykład:
<p>Wprowadź kursor i zmień wartość:
<input type="text" onchange="alert('Wartość uległa zmianie');">
</p>Po zmianie wartości należy opuścić kontrolkę (zmienić zogniskowanie) lub wcisnąć Enter.
onfocus#
Zdarzenie zostanie wywołane w chwili, kiedy element otrzymuje fokus (zogniskowanie). Może się to odbyć poprzez kliknięcie na elemencie myszką lub wybraniu go za pomocą przycisku TAB. Jest ono przeciwieństwem onblur. Prosty przykład:
<p>Wprowadź kursor: <input type="text" onfocus="alert('Pole uzyskało zogniskowanie');"></p>onreset#
Zdarzenie zostanie wywołane w chwili, kiedy formularz zostanie zresetowany. Odbywa się to za pomocą wciśnięcia odpowiedniego przycisku resetującego. Prosty przykład:
<form onreset="alert('Formularz został zresetowany')">
Imię: <input type="text" value="John">
<br>
Nazwisko: <input type="text" value="Rambo">
<br>
<input type="reset" value="Reset">
</form>Po kliknięciu przycisku Reset wszystkie dodatkowe wartości wprowadzone do pól formularza zostaną przywrócone do domyślnych.
onselect#
Zdarzenie zostanie wywołane w chwili, kiedy w elemencie zostanie zaznaczony jakiś tekst (lub jego część). Prosty przykład:
<p>Zaznacz tekst:
<input type="text" onselect="alert('Tekst został zaznaczony!');" value="Przykładowa treść">
</p>onsubmit#
Zdarzenie zostanie wywołane w chwili, kiedy formularz ma zostać wysłany. Często przydaje się do wstępnej walidacji danych po stronie użytkownika. Prosty przykład:
<form action="http://www.webref.pl" onsubmit="alert('Witaj ' + this.imie.value +'!')">
Jak masz na imię?<br>
<input type="text" name="imie">
<input type="submit" value="Wyślij">
</form>Po wpisaniu czegoś do pola tekstowego i kliknięciu przycisku Wyślij pojawi nam się alert z odpowiednią treścią (tą którą wprowadziliśmy). Po zatwierdzeniu komunikatu wczytana zostanie główna strona mojego autorstwa. Umiejętne weryfikowanie wprowadzanych danych za pomocą JS może zaoszczędzić moc przerobową serwera.
onkeydown#
Zdarzenie zostanie wywołane w chwili, kiedy przycisk klawiatury zostanie wciśnięty. Prosty przykład:
<p>Wprowadź wartość:
<input type="text" onkeydown="alert('Klawisz został wciśnięty!');">
</p>onkeypress#
Zdarzenie zostanie wywołane w chwili, kiedy przycisk klawiatury zostanie wciśnięty lub zwolniony. Prosty przykład:
<p>Wprowadź wartość:
<input type="text" onkeypress="alert('Klawisz został wciśnięty lub zwolniony!');">
</p>onkeyup#
Zdarzenie zostanie wywołane w chwili, kiedy przycisk klawiatury zostanie zwolniony. Prosty przykład:
<p>Wprowadź wartość:
<input type="text" onkeyup="alert('Klawisz został zwolniony!');">
</p>onclick#
Zdarzenie zostanie wywołane w chwili, kiedy element zostanie kliknięty (lewym przyciskiem myszki). Prosty przykład:
<button onclick="alert('Przycisk został kliknięty!')">Kliknij mnie raz!</button>ondblclick#
Zdarzenie zostanie wywołane w chwili, kiedy element zostanie kliknięty dwa razy (lewym przyciskiem myszki). Ważne jest by kliknięcia nastąpiły po sobie w krótkim odstępie czasu (tak jak ma to miejsce w systemie operacyjnym). Prosty przykład:
<button ondblclick="alert('Przycisk został podwójnie kliknięty!')">Kliknij mnie dwa razy!</button>onmousedown#
Zdarzenie zostanie wywołane w chwili, kiedy element zostanie kliknięty dowolnym przyciskiem myszki (lewym, prawym lub scrollem). Prosty przykład:
<button onmousedown="alert('Przycisk został kliknięty!')">Kliknij mnie!</button>onmousemove#
Zdarzenie zostanie wywołane w chwili, kiedy nastąpi poruszenie kursorem myszki nad elementem (w obrębie elementu). Wyłapywana jest zmiana położenia kursora z dokładnością do 1px. Prosty przykład:
<button onmousemove="alert('Poruszenie kursorem myszki!')">Wykonaj ruch w obrębie przycisku!</button>onmouseout#
Zdarzenie zostanie wywołane w chwili, kiedy kursor myszki jest odsuwany znad elementu (opuszcza jego obręb). Prosty przykład:
<button onmouseout="alert('Kursor opuścił obręb elementu!')">Odsuń kursor znad elementu!</button>onmouseover#
Zdarzenie zostanie wywołane w chwili, kiedy kursor myszki wskazuje na element. Prosty przykład:
<button onmouseover="alert('Element został wskazany!')">Najedź kursorem na element!</button>onmouseup#
Zdarzenie zostanie wywołane w chwili, kiedy nastąpi puszczenie naciśniętego, dowolnego przycisku myszki nad elementem (w jego obrębie). Prosty przykład:
<button onmouseup="alert('Przycisk został zwolniony!')">Zwolnij kliknięty przycisk!</button>