P°ehled u╛ivetelsk²ch udßlostφ - Udßlosti okna a dokumentu - Udßlosti my╣i - Udßlosti klßvesnice
| Udßlost | Popis | Lze pou╛φt na | Nefunguje v |
|---|---|---|---|
| onLoad | p°i ·plnΘm naΦtenφ strßnky | body, img | IE3 |
| onUnload | p°i opou╣t∞nφ strßnky | body | IE3 |
| onResize | p°i zm∞n∞ velikosti okna | body | IE3, NN3 |
| onScroll | p°i skrolovßnφ, posouvßnφ obsahu | body, textarea, cokoli s overflow | IE3 |
| Udßlost | Popis | Lze pou╛φt na | Nefunguje v |
|---|---|---|---|
| onClick | p°i kliknutφ na prvek nebo p°i p°ednastavenΘ akci |
v╣echny elementy, v 4. verzφch prohlφ╛eΦ∙ ale jenom n∞kterΘ |
|
| onDblClick | p°i dvojkliku na prvku | IE3, NN3 | |
| onMouseOver | p°i najetφ my╣φ na prvek | IE3 | |
| onMouseOut | p°i odjetφ z prvku | IE3 | |
| onMouseMove | p°i pohybu my╣i nad prvkem | IE3, NN3 | |
| onMouseDown | p°i stisknutφ tlaΦφtka nad prvkem | IE3, NN3 | |
| onMouseUp | p°i uvoln∞nφ tlaΦφtka nad prvkem | IE3, NN3 |
| Udßlost | Popis | Lze pou╛φt na | Nefunguje v |
|---|---|---|---|
| onKeyPress | p°i stisknutφ klapky ve chvφli, kdy je element aktivnφ | asi cokoliv | IE3, NN3 |
| onKeyDown | p°i stlaΦenφ klapky ve chvφli, kdy je element aktivnφ | IE3, NN3 | |
| onKeyUp | p°i uvoln∞nφ klapky ve chvφli, kdy je element aktivnφ | IE3, NN3 |
| Udßlost | Popis | Lze pou╛φt na | Nefunguje v |
|---|---|---|---|
| onSubmit | t∞sn∞ p°ed odeslßnφm formulß°e, p°φklad | form | IE3 |
| onReset | p°i vynulovßnφ formulß°e tlaΦφtkem reset | form | IE3 |
| onFocus | p°i aktivaci polφΦka (okna) | input, select, textarea, window | |
| onBlur | p°i deaktivaci polφΦka (okna) | input, select, textarea, (window nepotvrzeno) | |
| onChange | p°i zm∞n∞ hodnoty polφΦka | input, select, textarea | |
| onSelect | p°i v²b∞ru jinΘ hodnoty v selectu nebo p°i vybrßnφ textu my╣φ |
select, body (v²b∞r textu) |
v²b∞r textu nefunguje v IE3 a NN* |
| Udßlost | Popis | Lze pou╛φt na | Popora |
|---|---|---|---|
| onAbort | p°i p°eru╣enφ naΦφtßnφ | img, body | IE3 |
Dal╣φ udßlosti pro Internet Explorer 4 a vy╣╣φ (mo╛nß fungujφ v Mozille, ale v Netsapu urΦit∞ ne):
onBack - p°i stisknutφ tlaΦφtka "ZP╠T" (nepoda°ilo se mi to rozchodit)
onCopy - p°i kopφrovßnφ do schrßnky "Ctrl+C"
onCut - p°i vyjmutφ do schrßnky "Ctrl+X"
onForward - p°i stisknutφ tlaΦφtka "VP╪ED"
onHelp - p°i volßnφ nßpov∞dy, nap° "F1"
onMouseDrag - p°i pohybu my╣i se stisknut²m tlaΦφtkem
onMouseWheel - p°i rolovßnφ koleΦkem (nefunguje v IE 5.0)
onMove - p°i pohybu okna prohlφ╛eΦe (nepoda°ilo se nasimulovat)
onPaste - p°i vklßdßnφ ze schrßnky "Ctrl+V"
| Udßlost | Popis | Lze pou╛φt na | Nefunguje v |
|---|---|---|---|
| onLoad | p°i ·plnΘm naΦtenφ strßnky se v╣emi objekty | body, img | IE3 |
| onUnload | p°i opou╣t∞nφ strßnky | body | IE3 |
| onResize | p°i zm∞n∞ velikosti okna | body | IE3, NN3 |
| onScroll | p°i skrolovßnφ, posouvßnφ obsahu | body, textarea, cokoli s overflow | IE3 |
Udßlost onLoad nastßvß ve chvφli, kdy je objekt naΦten. Praktick² v²znam mß pro dokument (tag <body>) nebo pro obrßzek (<img>). Podle m²ch zku╣enostφ nelze vßzat na jinΘ tagy (mo╛nß je╣t∞ <object>, nevφm). P°φklad vyhozenφ hlß╣ky ve chvφli naΦtenφ dokumentu:
<body onload="alert('Dokument je naΦten')>
Udßlost onLoad se spou╣tφ a╛ po tΘ, co jsou naΦteny i v╣echny vlo╛enΘ objekty, nap°. obrßzky. (Nevφm, jestli udßlost Φekß i na naΦtenφ obsah∙ do <iframe>, ale asi ano.) V n∞kter²ch nßvodech se uvßdφ, ╛e se onload spou╣tφ ve chvφli, kdy se naΦte poslednφ znak zdroje. Nenφ to tak, Φekß se i na obrßzky.
Velmi praktickΘ je pou╛φt udßlost onload takΘ na obrßzek. Dejme tomu, ╛e chci n∞jakou akci spustit a╛ ve chvφli, kdy je obrßzek naΦten. To se hodφ, pokud ta akce pracuje s tφm obrßzkem. Kdyby byla toti╛ funkce volßna jinak, mohla by se spustit ve chvφli, kdy obrßzek je╣t∞ nenφ ze serveru naΦten². P°φklad:
<img src="obrazek.gif" onload="animuj(this)">
P°φklad p°edpoklßdß d°φv∞j╣φ deklaraci tΘ funkce animuj(), ale o to v tuto chvφli nejde. Jde o to, ╛e se pracuje s u╛ naΦten²m obrßzkem.
Jako synonymum k udßlosti onload umφ Internet Explorer od 4. verze pou╛φt takΘ onReadyStateChange. Praktick² rozdφl v tom nenφ, snad jen ╛e onLoad je udßlostφ okna, kde╛to onReadyStateChange je udßlostφ dokumentu.
Udßlost se spou╣tφ t∞sn∞ p°ed opu╣t∞nφm dokumentu. To m∙╛e b²t p°echod na jinou strßnku nebo zav°enφ okna prohlφ╛eΦe. Udßlost se vß╛e na objekt window a zapisuje se do tagu body:
<body onunload="window.alert('Nashledanou!')">
V tomto p°φkladu strßnka p°ed zav°enφm vyhodφ hlß╣ku s textem Nashledanou!. Daly by se d∞lat i jinΘ kousky, nap°φklad se leckde vidφ hlß╣ka "Opravdu chcete odejφt z tΘto super strßnky?" Na zßklad∞ odpov∞di se dß i zavφrßnφ skriptem zru╣it. Vlastnosti onUnload na vyhazovßnφ hlß╣ek nebo jin²ch zßludnostφ doporuΦuji nepou╛φvat. Je to jako takov² k°ik malΘho fracka "mamφ nesmφ╣ jφt pryΦ!", prost∞ to pova╛uji za ned∙stojnΘ.
Je ale dobrΘ v∞d∞t, ╛e vlastnost onUnload existuje a v p°φpad∞ pot°eby na nφ nav∞sit skript, kter² nebude u╛ivatele obt∞╛ovat.
Udßlost onResize nastane v╛dy, kdy╛ se zm∞nφ velikost okna prohlφ╛eΦe. Vyu╛φvß se zejmΘna na strßnkßch s dynamick²m obsahem, kterΘ majφ elementy vklßdßny stylem na p°esnou pozici. Kdy╛ se zm∞nφ velikost okna, je pot°eba pozice p°epoΦφtat.
Onresize se dß navßzat i na jinΘ objekty v dokumentu, kterΘ majφ definovanou ╣φ°ku. (Pouze v Intenret Exploreru, v Mozille mi to nefunguje.) Nap°.
<div onclick="this.style.width = '50px'" onresize="alert('M∞nφm
velikost')">Klikni si!</div>
V n∞kter²ch p°φpadech zm∞ny velikosti okna se ze zßhadn²ch d∙vod∙ spou╣tφ udßlost onresize n∞kolikrßt po sob∞. TakΘ se spou╣tφ ve chvφli, kdy se n∞jak²m skriptem zm∞nφ ╣φ°ka dokumentu. Na to je t°eba myslet a nevßzat na onresize akce, kterΘ m∞nφ velikost dokumentu, proto╛e by mohlo dojφt k zacyklenφ.
Udßlost onScroll nastßvß obecn∞ p°i rolovßnφ. Dß se pou╛φt u v╣eho, co mß rolovacφ li╣ty. NejΦast∞ji se vß╛e na tag <body>, proto╛e to je z hlediska skriptovßnφ nejpou╛iteln∞j╣φ. Pak se dß nap°φklad p°epoΦφtßvat pozice element∙, kterΘ majφ b²t viditelnΘ, i kdy╛ se se strßnkou posouvß.
P°φklad objektu zafixovanΘho na strßnce.
Test udßlosti onscroll. Udßlost onscroll neprobublßvß.
| Udßlost | Popis | Lze pou╛φt na | Nefunguje v |
|---|---|---|---|
| onClick | p°i kliknutφ na prvek nebo p°i p°ednastavenΘ akci |
v╣echny elementy, v 4. verzφch prohlφ╛eΦ∙ ale jenom n∞kterΘ |
|
| onDblClick | p°i dvojkliku na prvku | IE3, NN3 | |
| onMouseOver | p°i najetφ my╣φ na prvek | IE3 | |
| onMouseOut | p°i odjetφ z prvku | IE3 | |
| onMouseMove | p°i pohybu my╣i nad prvkem | IE3, NN3 | |
| onMouseDown | p°i stisknutφ tlaΦφtka nad prvkem | IE3, NN3 | |
| onMouseUp | p°i uvoln∞nφ tlaΦφtka nad prvkem | IE3, NN3 |
Onclick se spou╣tφ ve dvou p°φpadech:
P°eddefinovanß akce elementu nastßvß zejmΘna p°i prßci s tabulßtorem a Entrem -- ╗ukßnφm tabulßtoru se aktivujφ odkazy a formulß°ovß polφΦka. Kdy╛ se pak dß Enter, odkaz proklikne i bez my╣i. I v tom p°φpad∞ je ale volßna udßlost onclick.
OnClick se na strßnkßch bohat∞ pou╛φvß.
P°i kliknutφ prav²m nebo prost°ednφm tlaΦφtkem se udßlost onclick nevyvolß. Tam je pot°eba vyu╛φt udßlosti onmousedown nebo onmouseup. SamotnΘ udßlosti paknejsou schopnΘ rozli╣it, zda se kliklo lev²m nebo prav²m tlaΦφtkem. Udßlosti pravΘho tlaΦφtka se musejφ odchytßvat z udßlosti onmousedown a nßslednou podmφnkou. Informace o tom, kterΘ tlaΦφtko bylo stisknuto, se ulo╛ena ve vlastnosti event.button. Hodnoty event.button jsou 1 pro levΘ tlaΦφtko, 2 pro pravΘ, 4 pro prost°ednφ a p°φpadn∞ se to sΦφtß. Hodnota 3 tedy odpovφdß stisknutφ pravΘho a levΘho tlaΦφtka najednou, nulovß hodnota event.button znamenß, ╛e my╣ nikdo neutiskuje. P°φklad:
<img onmousedown="if(event.button == 2) alert('bylo stisknuto pravΘ
my╣φtko')">
Po kliknutφ na obrßzek (<img>) prav²m tlaΦφtkem se objevφ hlß╣ka. P°i kliknutφ lev²m se nic dφt nebude, aΦkoli prob∞hla udßlost onmousedown i onclick.
Dost Φast² problΘm u odkaz∙ je ten, ╛e chci, aby po kliknutφ spou╣t∞ly n∞jak²
skript a aby nenutily prohlφ╛eΦ p°ejφt na jinou strßnku. Kdyby toti╛
prohlφ╛eΦ p°e╣el na jinou strßnku, tak je ten proveden² skript v∞t╣inou na
nic. Zru╣enφ navigace se provede pomocφ klauzule return false,
Φφm╛ jakoby odkazu °eknu, ╛e nebyl prokliknut:
<a href="n∞kam_·pln∞_jinam" onclick="n∞coUd∞lej(); return false">Odkaz</a>
Dvojklik nastßvß, pokud se na elementu klikne dvakrßt rychle za sebou. Nenφ to moc pou╛itelnß v∞c, proto╛e lidΘ nejsou na internetu zvyklφ klikat dvakrßt. Rychlost dvojkliku zßle╛φ na nastavenφ systΘmu.
Tyto t°i vlastnosti jsou takovß trojΦata. Udßlost onMouseOver se spou╣tφ ve chvφli, kdy my╣ najede na element. OnMouseOut se spou╣tφ, kdy╛ my╣ element opustφ. Mezitφm probφhß udßlosti onMouseMove s v²jimkou situace, kdy se my╣ ·pln∞ zastavφ.
Onmouseover a onmouseout se v∞t╣inou pou╛φvajφ ve dvojkombinaci. N∞co se stane, kdy╛ my╣ na prvek najede, jinß akce (zpravidla inverznφ) se d∞je, kdy╛ my╣ prvek opustφ. Klasick²m p°φkladem je zßm∞na obrßzk∙ po najetφ my╣φ:
<img src="privni.gif" onmouseover="this.src = 'druhy.gif'" onmouseout="this.src
= 'prvni.gif'">
(Nynφ pomφjφm, ╛e by p°φklad nefungoval ve star╣φch prohlφ╛eΦφch, to ale nenφ zp∙sobeno udßlostmi, leΦ pou╛itφm objektu this.)
Udßlost onMouseMove se pou╛φvß dost z°φdka. Nenφ toti╛ moc ╣ikovnß a p°i um∞leckΘm zßpisu dokß╛e navφc p∞kn∞ zava°it procesor (nap°. SMS brßna Oskara v roce 2002), proto╛e se spou╣tφ opakovan∞ ve velmi krßtk²ch intervalech.
Z°φdka pou╛φvanΘ udßlosti zachycujφ stisknutφ a uvoln∞nφ tlaΦφtka my╣i, nikoliv samotn² klik. Ke kliknutφ (onclick) dojde jen v tom p°φpad∞, ╛e na jednom elementu nastane po sob∞ onMouseDown a onMouseUp. Pokud tedy n∞kde my╣φtko stisknu, odjedu na jin² element a tam my╣ pustφm, k udßlosti onclick na elementech nedojde. (Onclick ale zachytφ pravd∞podobn∞ pouze objekt document, proto╛e my╣ se stiskla i uvolnila na n∞m.)
Podstatnß v²hoda t∞chto dvou udßlostφ je v p°esnΘm naΦasovßnφ skriptu a takΘ v tom, ╛e narozdφl od onclick reagujφ i na stisknutφ pravΘho nebo prost°ednφho tlaΦφtka.
P°φklady: Identifikace pravΘho tlaΦφtka, PofidΘrnφ zakßzßnφ pravΘho tlaΦφtka
Udßlost se volß p°i vyvolßnφ kontextovΘ nabφdky, nejΦast∞ji kliknutφm pravΘho tlaΦφtka. Nefunguje v Ope°e. Nejjednodu╣╣φ zakßzßnφ pravΘho tlaΦφtka my╣i:
<body oncontextmenu="return false">
A zcela mimochodem: nezakazujte pravΘ tlaΦφtko, je to prasßrna.
| Udßlost | Popis | Lze pou╛φt na | Nefunguje v |
|---|---|---|---|
| onKeyPress | p°i stisknutφ klapky ve chvφli, kdy je element aktivnφ | asi cokoliv | IE3, NN3 |
| onKeyDown | p°i stlaΦenφ klapky ve chvφli, kdy je element aktivnφ | IE3, NN3 | |
| onKeyUp | p°i uvoln∞nφ klapky ve chvφli, kdy je element aktivnφ | IE3, NN3 |
Udßlosti klßvesnice se dajφ pou╛φt ve chvφli, kdy je aktivnφ n∞jak² element, kter² by m∞l na stisk klßves reagovat. Naprosto nejΦast∞ji jsou to formulß°ovΘ prvky (ale teoreticky i odkazy, ty si v╣φmajφ Entru).
OnKeyDown reaguje na stlaΦenφ, onKeyUp na uvoln∞nφ klßvesy. Dohromady to dßvß udßlost onKeyPress, kterß se takΘ pro klßvesovΘ udßlosti pou╛φvß v naprostΘ v∞t╣in∞.
Jan ⌐evΦφk mi poslal velmi zajφmavΘ odkazy o udßlostech v javascriptu:
http://www.interval.cz/clanek.asp?id=1666
http://www.interval.cz/clanek.asp?id=1933
http://www.webtip.cz/art/wt_tech_dhtml/dhtml_006.html
Spoustu v∞cφ jsem fakt netu╣il.
| P°edchozφ: ZabudovanΘ funkce |
Obsah strßnek o
JavaScriptu na serveru Jak psßt web |
Dal╣φ: Otev°enφ novΘho okna |
| Vizte tΘ╛:
Objekt window.event P°φklady: prosφm vizte odkazy v²╣e, je jich moc |
||
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek