Zdarzenia
Zdarzenia
Zdarzenia myszy
onclick - kliknięcie dowolnego znacznika
onclick Event
ondblclick - podwójne kliknięcie dowolnego znacznika
ondblclick Event
onmouseover - najechanie kursorem myszy na dany obszar
onmouseover Event
onmouseout - opuszczenie danego obszaru przez kursor myszy
onmouseout Event
Warto przeczytać JavaScript Events
<!DOCTYPE html> <html lang="pl-PL"> <head> <meta charset="utf-8"> <title>Zdarzenia</title> </head> <body> <button onclick="klikniecie()">Kliknij</button> <p id="test">Tekst przed kliknięciem</p> <button ondblclick="klikniecie2()">Kliknij 2 razy</button> <p id="test2">Tekst przed kliknięciem</p> <img src="kwiatek.jpg" width="200" onmouseover="kursor()" onmouseout="kursor_out()"> <p id="test3">Tekst przed najechaniem kursorem na obraz</p> <script> function klikniecie() { document.getElementById("test").innerHTML = "Tekst po kliknięciu"; } function klikniecie2() { document.getElementById("test2").innerHTML = "Tekst po podwójnym kliknięciu"; } function kursor() { document.getElementById("test3").innerHTML = "Tekst po najechaniu kursorem na obrazek"; } function kursor_out() { document.getElementById("test3").innerHTML = "Tekst po opuszczeniu obrazka"; } </script> </body> </html>
Zdarzenia klawiatury
onkeydown - wciśnięcie (przytrzymanie) klawisza na klawiaturze
onkeydown Event
onkeypress - wciśnięcie (krótkotrwałe) klawisza na klawiaturze deprecated
onkeypress Event
onkeyup - zwolnienie klawisza
onkeyup Event
<!DOCTYPE html> <html lang="pl-PL"> <head> <meta charset="utf-8"> <title>Zdarzenia</title> </head> <body> <input type="text" onkeydown="przytrzymanie()"> <script> function przytrzymanie() { alert("wciśnięcie (przytrzymanie) klawisza na klawiaturze"); } </script> </body> </html>
Zdarzenia obiektów
onload - ładowanie strony
onload Event
onscroll - wywołuje funkcję, kiedy div (blok) jest przewijany
onscroll Event
onresize - zmiana rozmiaru okna
onresize Event
<!DOCTYPE html> <html lang="pl-PL"> <head> <meta charset="utf-8"> <title>Zdarzenia</title> </head> <body onload="podaj_imie()"> <script> function podaj_imie() { var imie=prompt("Jak masz na imię?"); document.write("Witamy "+imie); } </script> </body> </html>
Skrypt wyświetlający nazwę zwierzątka po kliknięciu na obrazek
Kliknij
<!DOCTYPE html> <html lang="pl-PL"> <head> <meta charset="utf-8"> <title>Zdarzenia</title> <style> img { width:200px; } #wynik { background-color:blue; color:white; padding:50px; margin:50px; text-align:center; font-size:30px; } #tresc { background-color:lightgreen; color:slategrey; padding:30px; margin:30px; text-align:center; font-size:20px; } table { margin:auto; } </style> </head> <body> <script> function papuga() { document.getElementById("wynik").innerHTML="PAPUGA"; document.getElementById("tresc").innerHTML="Papużko, papużko,<br>Powiedz mi coś na uszko.<br>Nic 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>A ja zazdroszczę żyrafie,<br>Ja nie potrafię."; } function krokodyl() { document.getElementById("wynik").innerHTML="KROKODYL"; document.getElementById("tresc").innerHTML="Skąd ty jesteś, krokodylu?<br>Ja? 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> <div id="tabela"> <table> <tr> <td><img src="papuga.jpg" id="papuga" onclick="papuga()"></td> <td><img src="zyrafa.jpg" id="zyrafa" onclick="zyrafa()"></td> <td><img src="krokodyl.jpg" id="krokodyl" onclick="krokodyl()"></td> <td><img src="zebra.jpg" id="zebra" onclick="zebra()"></td> <td><img src="wilk.jpg" id="wilk" onclick="wilk()"></td> </tr> </table> </div> <div id="wynik"> </div> <div id="tresc"> </div> </body> </html>