Události JavaScriptu

Přehled uživetelských událostí - Události okna a dokumentu - Události myši - Události klávesnice

Přehled uživatelských událostí

Události okna a dokumentu:
Událost	Popis	Lze použít na
onLoad	při úplném načtení stránky	body, img
onUnload	při opouštění stránky	body
onResize	při změně velikosti okna	body
onScroll	při skrolování, posouvání obsahu	body, textarea, cokoli s overflow

Události myši
Událost	Popis	Lze použít na
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
onMouseOver	při najetí myší na prvek
onMouseOut	při odjetí z prvku
onMouseMove	při pohybu myši nad prvkem
onMouseDown	při stisknutí tlačítka nad prvkem
onMouseUp	při uvolnění tlačítka nad prvkem

Události klávesnice
Událost	Popis	Lze použít na
onKeyPress	při stisknutí klapky ve chvíli, kdy je element aktivní	asi cokoliv
onKeyDown	při stlačení klapky ve chvíli, kdy je element aktivní
onKeyUp	při uvolnění klapky ve chvíli, kdy je element aktivní

Test onKeyPress

Události formuláře a formulářových polí
Událost	Popis	Lze použít na
onSubmit	těsně před odesláním formuláře, příklad	form
onReset	při vynulování formuláře tlačítkem reset	form
onFocus	při aktivaci políčka (okna)	input, select, textarea, window, odkazy
onBlur	při deaktivaci políčka (okna)	input, select, textarea
onChange	při změně hodnoty políčka	input, select, textarea
onSelect	při vybrání textu myší	body (výběr textu), textarea, input

Další události
Událost	Popis	Lze použít na
onAbort	při přerušení načítání	img, body

Další události pro Internet Explorer 4 a vyšší (možná fungují v Mozille, ale v Netsapu určitě ne):

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"
onFocusIn - při příchodu focusu na prvek
onFocusOut - při odchodu focusu na prvek (podobné jako onBlur)

Události okna a dokumentu

Událost	Popis	Lze použít na
onLoad	při úplném načtení stránky se všemi objekty	body, img
onUnload	při opouštění stránky	body
onResize	při změně velikosti okna	body
onScroll	při skrolování, posouvání obsahu	body, textarea, cokoli s overflow

OnLoad

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:

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:

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.

Animované gify spouštětjí onload chybně při každém zobrazování prvního snímku.

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.

OnUnload

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:

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.

OnResize

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>

Klikni si!

Jiný příklad.

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í.

OnScroll

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álosti myši

Událost	Popis	Lze použít na
onClick	při kliknutí na prvek nebo při přednastavené akci	všechny elementy
onDblClick	při dvojkliku na prvku
onMouseOver	při najetí myší na prvek
onMouseOut	při odjetí z prvku
onMouseMove	při pohybu myši nad prvkem
onMouseDown	při stisknutí tlačítka nad prvkem
onMouseUp	při uvolnění tlačítka nad prvkem

OnClick

Onclick se spouští ve dvou případech:

jestliže se na element kliklo myší
nebo pokud dojde k předdefinované akci elementu.

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:

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.

Zrušení kliknutí

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>

OnDblClick

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.

OnMouseOver, onMouseOut, onMouseMove

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ší:

(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.

OnMouseDown, onMouseUp

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

OnContextMenu

Událost se volá při vyvolání kontextové nabídky, nejčastěji kliknutím pravého tlačítka. Nemusí fungovat ve všech prohlížečích. Nejjednodušší zakázání pravého tlačítka myši:

A zcela mimochodem: nezakazujte pravé tlačítko, je to prasárna. Doufám, že to novější prohlížeče přestanou podporovat.

Události klávesnice

Událost	Popis	Lze použít na
onKeyPress	při stisknutí klapky ve chvíli, kdy je element aktivní	asi cokoliv
onKeyDown	při stlačení klapky ve chvíli, kdy je element aktivní
onKeyUp	při uvolnění klapky ve chvíli, kdy je element aktivní

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).