Základy JavaScriptu
Obsluha událostí v JavaScriptu
 Tisk

Obsluha událostí v JavaScriptu

Události a jejich obsluha

Prostřednictvím skriptů lze obsluhovat řadu různých událostí. Tyto události nastávají na popud uživatele - např. pokud uživatel klikne ukazatelem myši na nadpis, bude vyvolána událost onclick na tomto konkrétním nadpisu. Nebo klikne-li ukazatelem myši kdekoliv do dokumentu, bude vyvolána událost onclick na tomto aktuálním dokumentu. Chcete-li přiřadit událost nějakému prvku na stránce, vložte do značky příslušného prvku jako její atribut ovladač události, který má jméno shodné s názvem události.

Situaci ilustruje následující příklad. Pokud kliknete ukazatelem myši kdekoli v aktuálním dokumentu, vypíše se zpráva metodou alert. Ovladač události onclick umístěný ve značce <body> zajistí vyvolání funkce Zprava() a ta vypsání zprávy.

     ...

     function Zprava() {

     alert("Kliknul jsi do dokumentu");}

     ...

    <body onclick = "Zprava()">

        ...

     </body>

     ...

Doba provedení skriptu tedy nemusí být vázána pouze na umístění daného skriptu ve zdrojovém kódu (X)HTML, ale může být vázána na nějakou událost. Dalšími příklady skriptu vázaného na nějakou událost může být odeslání vyplněného dotazníku, kdy je skript spuštěn až ve chvíli, kdy uživatel klikne na tlačítko odeslat, nebo situace, kdy najedete ukazatelem myši na nějaký obrázek a ten se rozsvítí.

Níže uvedený příklad s obrázkem lze realizovat následovně. Nejdříve vytvoříte dva obrázky, jeden bude tmavý (heoff.jpg) a druhý světlý (heon.jpg).Tmavý bude zobrazen v případě, že ukazatel myši na něj nebude ukazovat. Druhý, světlý, se zobrazí tehdy, přejede-li přes něj ukazatel myši. Vložte tento skript do sekce <head>, nebude však vadit, umístíte-li jej kamkoli jinam:

     function obrjedna(obrazek) {

     obrazek.src="heon.jpg"}

     function obrdva(obrazek) {

     obrazek.src="heoff.jpg"}

Potom vložte místo klasického odkazu na obrázek:

     <img src = "heon.jpg" />

následující kód:

     <img id="Obrazek1"

     onmouseover = "obrjedna(Obrazek1)"

     onmouseout = "obrdva(Obrazek1)" src="heon.jpg"

     width = 150 height = 150 border = "0" />

Kdykoli nyní přejdete přes obrázek ukazatelem myši, jako by se rozsvítil. Reaguje tedy na událost. Těmito událostmi jsou zde události onmouseover a onmouseout, tedy události, kdy je ukazatel myši umístěn na obrázku a kdy je umístěn mimo obrázek. Tyto události pak předají řízení uvedenému skriptu.

Pro úplnost uvedeme, že události lze ovládat i prostřednictvím jiných skriptovacích jazyků, např. VBScriptu.

Stručný popis některých událostí

Události onclick a ondblclick

Událost onclick je vyvolána prohlížečem tehdy, když uživatel klikne ukazatelem myši na prvek dokumentu, v jehož (X)HTML kódu je uveden jako atribut ovladač události onclick. Například pokud je tento atribut umístěn ve značce img, která definuje obrázek, nastane událost onclick v případě, že uživatel klikne na tento obrázek. Událost onclick může nastat u každého prvku stránky, dokonce i u objektu document a to tehdy, když uživatel klikne kamkoliv do dokumentu.

Hodnotou atributu onclick je řetězec, který může obsahovat libovolný počet příkazů JavaScriptu oddělených středníky (toto platí obecně pro všechny atributy definující ovladač události). Většinou však bývá v atributu onclick uvedena funkce, která událost obsluhuje viz příklad .

Událost ondblclick je vyvolána tehdy, když uživatel poklepe ukazatelem myši na daný prvek (provede dvojklik).

Události onmouseover, onmouseout a onmousemove

Událost onmouseover je vyvolána v okamžiku, kdy se ukazatel myši přesune nad prvek zobrazený na stránce, není nutné stisknout tlačítko myši. Ovladač události se definuje atributem onmouseover v jakékoliv značce, která definuje nějaký prvek na stránce. Událost onmouseout je naopak vyvolána v okamžiku, kdy se ukazatel myši přesune mimo prvek. Ovladač této události je definován atributem onmouseout jakékoliv značky, kde chceme událost využít.

Příklad viz ukázka zajistí při přesunu ukazatele myši nad text, že ten bude vypsán kurzívou. Pokud ukazatel přemístíte mimo, bude opět vypsán normálně.

Událost onmousemove nastane tehdy, když uživatel pohne ukazatelem myši nad daným prvkem. Příklad : kdykoli, kdy se ukazatel myši pohne nad vstupním polem <input>, zjistí aktuální souřadnice ukazatele myši vzhledem k oknu prohlížeče a v tomto poli je zobrazí. Jakmile ukazatelem myši odjedete pryč ze vstupního pole, souřadnice se přestanou zobrazovat.

Události onload a onunload

Tyto události jsou definovány na objektu window. Událost onload nastává, když je dokument nebo sada rámců plně načtena do prohlížeče. Bývá definován jako atribut onload značek <body> nebo <frameset>.

Když je ovladač událostí onload vyvolán, je dokument vždy kompletně načten, a tudíž jsou všechny skripty provedeny, všechny funkce ve skriptech definovány a všechny prvky jsou jako objekty dostupné prostřednictvím objektu document. Událost onload se používá při akcích, které jsou spojeny s načtením dokumentu, např. počítání času apod.

Opakem je událost onunload, která je také součástí objektu window a nastane tehdy, když prohlížeč ukončí práci s aktuálním dokumentem nebo sadou rámců (tzn. okno prohlížeče se zavře nebo je načítán nový dokument). Ovladač události onunload je definován atributem onunload značek <body> nebo <frameset>, stejně jako u události onload.

Příklad je ilustrací využití události onload může být zobrazení aktuálního času v textovém políčku formuláře. Poprvé se funkce spustHodiny spustí při načtení dokumentu a pak cyklicky každou sekundu.