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

Test onKeyPress

Události formuláře a formulářových polí
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
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*

Další události
Událost	Popis	Lze použít na	Popora
onAbort	při přerušení načítání	imb	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"
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
onMove - při pohybu okna prohlížeče
onPaste - při vkládání ze schránky "Ctrl+V"

Události okna a dokumentu

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

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:

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

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:

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

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

Test události onscroll. Událost onscroll neprobublává.

Události myši

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

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:

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

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

<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 procesoru (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 dovou událostí je v přesném načasování skriptu a také v tom, že narozdíl od onclick regují i na stisknutí pravého nebo prostředního tlačítka.

Události klávesnice

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

Test onKeyPress

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

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