Veškeré vymoženosti skriptů ve WWW stránkách by byly k ničemu bez možnosti volat funkce a provádět akce podle toho, co se se stránkou právě děje. S "čistým" javascriptem vlastně můžeme něco udělat pouze během načítání kódu - když při načítání stránky narazí prohlížeč na nějaký příkaz v sekci <script>, provede jej a zase pokračuje v natahování dalšího obsahu. Poté, co se načítání stránky ukončí, skončí však i tyto aktivity a více bychom se ke skriptům nedostali. Naštěstí existují tzv. události (events), které poskytují právě tu hlavní sílu skriptů: spouštět akce na základě změn, které v dokumentu nastaly.

Většina těchto událostí je v prohlížečích předdefinována a pokrývají takřka všechny změny, které na stránce mohou nastat. Od pohybu ukazatele (kurzoru myši) nad nějakým objektem, kliknutí myši či stisku klávesy, přes načtení nějakého prvku či celého dokumentu, otevření a zavření okna, změnu fokusu okna (přesun do popředí/do pozadí) či nějakého prvku, až po vypršení nastavené doby časovače či situaci, kdy nastane nějaká chyba v běhu programu. Každá z těchto předdefinovaných událostí má přiřazen svůj ovladač (handler). Tento ovladač je pojmenován ve tvaru onUdálost - tedy např. onClick, onLoad, onChange atd. - ten se zavolá, pokud tato událost nastane.

Události podporované v prohlížečích jsou uvedeny v následující tabulce, kde je kromě názvu a popisu události uvedeno i v jakém prohlížeči je možné ji použít (NN = Netscape Navigator, IE = MS Internet Explorer, O = Opera).

Pozn. 1: Prohlížeč NN před verzí 6 má ještě další možnosti práce s událostmi (např. captureEvents, releaseEvents), NN6 již ale přešel na práci s událostmi podle DOM-2, a tak funkce NN4 již nemají další perspektivu. Nebudeme se jim zde proto věnovat.

Pozn. 2: DOM ve verzi 2 přinesl změnu do zpracování událostí: pomocí objektů EventTarget a EventListener umožnil zobecnění definování eventů a jejich zpracování. Této technologii se však budeme věnovat později - prozatím si vystačíme s faktem, že prohlížeče podporující DOM-2 (Mozilla) podporují i většinu původních událostí ze starších verzí prohlížečů. Za "standardní" lze pokládat ty, které jsou dle výše uvedené tabulky podporovány v prohlížečích NN i MSIE.

Zpracování událostí

Každý z výše uvedených ovladačů (handlerů) může mít přiřazen kód, který se má provést, pokud událost nastane. Výchozí hodnotou je většinou null, tzn. že událost nevyvolá žádnou akci. Chceme-li akci pro daný objekt při určité události přiřadit, existují dvě možnosti:

1. Přímo v HTML pomocí atributu odpovídajímu názvu ovladače. Jeho hodnotou je tělo funkce, která se má provést, když událost nastane. Jméno atributu v HTML není case-sensitive (nerozlišují se malá/velká písmena), může být tedy použito např. onload, onLoad, ONLOAD (v XHTML však již musí být jména atributů pouze malými písmeny).
   Syntaxe je tedy: <tag ... onEvent="kód" ...>
   např. <a href="..." onclick="alert('Zprava');return false">
   nebo:<a href="..." onClick="ovladacOnClick()">
2. Ve skriptu přiřazením hodnoty té metodě objektu, která reprezentuje daný ovladač. Tyto metody rovněž odpovídají názvům ovladačů (viz tabulka výše), musí být psány malými písmeny (ačkoli některé prohlížeče, třeba NN4, akceptují i jména handlerů s velkými písmeny, rozhodně se to nedoporučuje používat). Jejich hodnotou je jméno funkce, na niž ovladač přesměrujete - tato funkce se pak sama stává ovladačem dané události:
   Syntaxe: mujObjekt.onevent = nazev_funkce;
   např.: mujObjekt.onclick = ovladacOnClick;

Pozn.: Ovladače událostí by měly vracet logickou hodnotu true|false (důvod viz Předávání událostí níže). Pokud ji nevracejí, není to chybou a v naprosté většině případů to nezpůsobí žádný problém - v budoucnu však mohou být požadavky prohlížečů již přísnější, je proto vhodné si vracení hodnoty z ovladače osvojit jako dobrý zvyk.

Je důležité dát si pozor na rozdíl v definování ovladačů v HTML a ve skriptu - zatímco v HTML ovladači přiřazujete přímo kód, ve skriptu je jeden mezikrok navíc: objektu přiřazujete pouze název funkce, která se tak sama stává ovladačem - kód, který se má provést, je až v těle této funkce. V podstatě jsou však oba případy shodné - pouze u HTML proběhne toto přiřazení skrytě: napíšeme-li např.:

<div id="prvek" onclick="alert('Ahoj');return true">...

vytvoří se vlastně (skrytá, anonymní) funkce, které se volá pokaždé, když uživatel klikne na objekt "prvek". Stane se tedy totéž, jako bychom ve skriptu napsali:

document.getElementById('prvek').onclick = function() {
   alert('Ahoj');
   return true;
}

Zdůrazňuji to zde především proto, abychom se vyvarovali časté chyby, která pramení právě z nedostatečného pochopení tohoto mechanismu, kdy autor do metody onevent nějakého objektu přiřadí místo funkce její hodnotu, obdobně jako při zápisu v atributu HTML značky. Ukažme si to na příkladu: celkem časté je potřeba spuštění nějaké inicializační funkce po načtení stránky (tedy po události onload celého dokumentu). Připravíme si např. funkci Init(), která se má po načtení stránky zavolat; událost pak můžeme přiřadit dvěma způsoby:

<script type="text/javascript">
...
function Init() {
   ...
}
...
</script>
</head>
<body onload="Init()">
...

nebo pomocí javascriptu (načtení dokumentu odpovídá onload objektu window):

<script type="text/javascript">
...
window.onload = Init;
function Init() {
   ...
}
...
</script>
</head>
<body>
...

Velmi často se však stane, že autor ve druhém případě omylem zapíše:

window.onload = Init();

což rozhodně nebude produkovat to, co autor zamýšlel. Prvním zápisem <body onload="Init()"> vlastně definujeme tělo nějaké skryté funkce, stejně jako bychom napsali window.onload = function() { Init() } - když při načítání stránky prohlížeč narazí na značku <body>, vytvoří tuto anonymní funkci, která se stane ovladačem události onload. Po načtení celé stránky se tato událost aktivuje, zavolá se její ovladač (ona anonymní funkce) a provede se její tělo - tedy zavolá se funkce Init().

Zápisem window.onload = Init(); však definujeme příkaz - a příkazy se provádějí ihned. My zde tímto příkazem přiřazujeme metodě window.onload hodnotu funkce Init() - jelikož tato funkce žádnou hodnotu nevrací, provedeme vlastně přiřazení window.onload = null, takže po načtení stránky žádná akce neproběhne, protože ovladač window.onload má hodnotu null. Abychom dosáhli požadovaného účinku, musíme tedy ovladači onload přiřadit ne hodnotu funkce (Init()), ale funkci samu (Init).

Je tedy důležité rozlišovat oba zápisy:

<body onload="Init()">
ale
window.onload = Init;

Předávání událostí

Na každé stránce se vždy nachází několik objektů na sobě - tak jak jsou uspořádány ve stromu dokumentů. V okně (objekt window) se nachází document, v něm např. <DIV>, v něm je <P> a v něm pak <A>. Javascript řeší předávání událostí mezi překrývajícími se prvky, a to pomocí technologie, která se anglicky výstižně jmenuje event bubbling (česky - řekněme - probublávání událostí). Funguje to tak, že nastalou událost dostane jako první ke zpracování prvek, který je umístěn na ploše stránky "nejvýše" (tedy je nejhlouběji ve stromu dokumentu), potom ji předá svému rodičovskému prvku, ten pak svému atd. - takto událost probublá až na vrchol stromu.

Kdykoli v průběhu zpracování události je ale možné ji zastavit a další předávání zakázat - zpracuje-li nějaký prvek událost, jeho rodičovský prvek se tak už o ní nemusí dozvědět. Dostáváme se zde k již zmíněným návratovým hodnotám ovladačů - ty slouží právě k řízení bubblingu událostí. Logická hodnota, kterou vrátí ovladač, říká, zda se má událost přepustit dál:

• vrátí-li ovladač události true, událost se předá dalšímu prvku v hierachii
• vrátí-li ovladač události false, událost se "skartuje" a rodičovské prvky ji nedostanou

Pozn.: Pokud ovladač nevrací žádnou hodnotu, je další zpracování události na prohlížeči - obvykle se však chová tak, jako by byla vrácena hodnota true (ale jak již bylo řečeno, v budoucnu se může chování prohlížečů změnit a je proto dobré zvyknout si logickou hodnotu z ovladače vracet vždy).

S probubláváním je důležité počítat i u skrytých událostí. Některé prvky v sobě totiž mají integrováno zpracování událostí, které je jinak skryto a je vlastní jen danému typu prvku - typickou ukázkou může být hypertextový odkaz (HTML značka <A>), který provede akci (přesměruje dokument na novou adresu), když na něj uživatel klikne (nebo jej jiným způsobem aktivuje). Pokud do této značky přidáme vlastní ovladač události, např. onclick, dostane sice přednost před původním zpracováním aktivace odkazu, to však zůstane nad ním v hierachii. Nezakážeme-li další předávání události, po zpracování našeho onclick se kliknutí dostane i k původnímu ovladači a proběhne tedy běžné přesměrování. Porovnejme následující dvě ukázky:

<a href="novastranka.html" onclick="nejakaFunkce()">odkaz</a>

<a href="novastranka.html" onclick="nejakaFunkce();return false">odkaz</a>

V prvním případě náš ovladač onclick nevrací žádnou hodnotu (tedy jakoby vracel true) - po kliknutí na odkaz se nejprve provede naše funkce a poté se událost kliknutí myši dostane k samotnému prvku <a>, který do okna prohlížeče načte nový dokument novastranka.html. Ve druhém případě však náš ovladač vrací hodnotu false, která zakáže další zpracování události - takže samotný prvek <a> se o kliknutí nedozví a k žádnému přesměrování nedojde. S tímto je důležité počítat například při otevírání odkazů do nového okna daných vlastností - např. otevření obrázku ve vyšším rozlišení v okně dialogového typu (bez menu, scrollbarů, nástrojové lišty, daných rozměrů atd.)

function otevriObrazek(url) {
   window.open(url,'obrazek','toolbar=0,location=0,status=0,...');
   return false;
}
...
<a href="obrazek_velky.jpg" onclick="return otevriObrazek('obrazek_velky.jpg')">
<img src="obrazek_maly.jpg" alt="" ...></a>

Pokud bychom zde nevrátili hodnotu false, obrázek by se sice otevřel v novém okně, ale poté by se načetl i do okna místo původního dokumentu, což většinou není žádoucí.

Návratových hodnot můžeme také využít pro řízení událostí podle nějakého předchozího nastavení - např. podle dříve zjištěných možností prohlížeče či podle předvoleb uživatele. Uživatel si např. v předvolbách zvolí, zda chce otevírat texty příspěvků ve zvláštním okně, či v okně stávajícím. Pokud tento údaj budeme mít v nějaké proměnné, můžeme podle ní řídit chování odkazů:

var vNovemOkne;
...
function otevriOdkaz(url) {
   if (vNovemOkne) {
      window.open(url,....);
      return false;
   }
   else return true;
}
...
<a href="adresa" onclick="return otevriOdkaz(this.href)">odkaz</a>

Po kliknutí na odkaz se nejprve zavolá funkce (ovladač) otevriOdkaz() a ta podle hodnoty globální proměnné vNovemOkne buďto otevře odkaz v novém okně (daných vlastností) a vrátí false (událost se zahodí a nic dalšího se nestane) - anebo neudělá nic a vrátí true (odkaz se pak zpracuje běžným způsobem).

Příště se budeme věnovat dalším podrobnostem práce s událostmi.

Použitelnost prvků zmíněných v tomto díle:

Element.onevent

viz tabulka výše

Staníček Petr