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:

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

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:

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

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:

  1. jestliže se na element kliklo myší
  2. 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 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:

<body oncontextmenu="return false">

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

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

Další události

Moderní prohlížeče přidávají každý rok nové události, které jsou občas na něco použitelné.

Některé události se dají najít přes rozšíření prohlížečů nebo přes event Listener. Prohlížeče mají různá rozšíření, která se většinou vyvolávají klávesou F12. Tam se dají doklikat různé zajímavosti.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy, objekty Příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.