JavaScript je ZLO 2.0

Pokud pracujete s JavaScriptem, určitě jste už narazili na události a nutnost jejich obsluhy. Pokud ne, počkejte si až narazíte a teprve pak čtěte tento článek.

Celá ta šaráda kolem událostí v JavaScriptu a DOMu je zbytečně složitá a nemá smysl se o ní rozepisovat nějak do hloubky, to by beztak nikoho nezajímalo. Článek proto bude takový zjednodušený, občas možná na úkor přesnosti, tak mi pak nenadávejte, varoval jsem vás předem.

Událost (event) a ovladač události (event handler)

Jestliže se v prohlížeči něco stane, např. uživatel klikne, pohle myší či stiskne klávesu, říkáme že nastala událost (event). Prohlížeč o této události automaticky vyhotoví zprávu a tuto zprávu pošle těm objektům DOMu, o kterých si myslí že by je událost mohla zajímat. Zprávě říkáme objekt události (event object), častěji ale zkráceně událost (event), což je postačující.

Objekty DOMu mohou zprávy o událostech přijímat pomocí speciálních funkcí kterým říkáme ovladače událostí (event handlers). Element DOMu má pro každý typ události, který je schopen přijmout, speciální ovladač. Nemá-li ovladač některé události, znamená to že na ni nedokáže přímo reagovat.
Názvy událostí v JavaScriptu označujeme vždy malým písmem: “click”, “submit”, “mouseover”. Názvy ovladačů událostí jsou pak složeninou “on” + název události, tedy “onclick”, “onsubmit”, “onmouseover”.

Pokud například uživatel klikne na tlačítko, prohlížeč o tom pošle tlačítku zprávu, neboť správně předpokládá že tlačítko bude o události chtít vědět. Zprávu pošle tak, že zavolá funkci onclick tlačítka a předá jí zprávu jako argument.

Automaticky volané funkce (callbacks)

“Nevolejte nám, my vám zavoláme zpět” říká se v Hollywoodu. Přesně takto funguje callback funkce - vy ji jenom nadefinujete, zaregistrujete a browser si ji v případě potřeby sám zavolá včetně potřebných argumentů. Nejvýmluvnější bude jako obvykle příklad:
Řekněme že máme dokument obsahující tlačítko s id “myButton”. Toto tlačítko si tedy nejdříve najdeme:

Teď si nadefinujeme callback funkci, tedy funkci která se má pustit v případě že uživatel na tlačítko klikne:

A teď už zbývá jen funkci zaregistrovat jako ovladač události “click”:

Všiměte si že za myCallback nejsou závorky, funkce myCallback se tedy nezavolá - vzpomínáte, “nevolejte, my vám zavoláme”. Funkci zavolá sám prohlížeč v případě, že někdo klikne na tlačítko myButton. Funkce myCallback je nyní registrovaná jako ovladač události “click”.

Registrace event handleru funkcí lib.elm.add

Přiřazení

má určité nevýhody, proto ho nikdy nepoužívejte. Místo toho poskytuje knihovna lib.evt funkci lib.evt.add která umí totéž (a něco navíc):

Všiměte si že jako druhý argument místo názvu handleru “onclick” používáme název události “click”.

Příklad: libEvt.demo01.html, libEvt.demo01.js

Více callback funkcí pro jednu událost (konečně něco zajímavého)

Dost často se vyskytne požadavek připojit více callback funkcí na jeden event handler. S knihovnou lib.evt je to snadné:

Takto lze připojit libovolné množství callback funkcí a všechny se při kliknutí provedou.

Příklad: libEvt.demo02.html, libEvt.demo02.js

Pořadí volání - priority

Někdy je potřeba zajistit, aby callback funkce proběhly v určitém pořadí, například aby se po stisknutí tlačítka formulář nejdříve validoval a teprve pak odeslal. K nastavení pořadí volání slouží celočíselné priority zadávané jako čtvrtý argument funkce lib.evt.add. Čím větší priorita, tím dříve se callback funkce spustí:

Tento kód spustí po kliknutí na tlačítko nejprve funkci validateForm (priorita 2) a pak teprve submitForm (priorita 1). Stejně by program fungoval i kdybychom registrace prohodili:

Pokud čtvrtý argument neuvedeme nebo mu dáme hodnotu null, použije se automaticky hodnota 0.

Příklad: libEvt.demo03.html, libEvt.demo03.js

Odebrání event handleru pomocí lib.evt.remove

Chceme-li se některé callback funkce obsluhující událost zbavit, můžeme to udělat za pomoci funkce lib.evt.remove.
Jako argument musíme zadat registrační číslo callback funkce kterou chceme odebrat. Každá registrovaná callback funkce má svoje unikátní registrační číslo podle kterého ji můžeme kdykoli najít. Jak toto číslo zjistit?
Nejjednoduší metoda je zapamatovat si ho při registraci, neboť funkce lib.evt.add vrací právě toto registrační číslo:

Takto přidanou callback funkci pak můžeme snadno odebrat voláním

Jak vidno, k odebrání callback funkce stačí skutečně znát jen registrační číslo, nemusíme vědět na jakém elementu je zaregistrovaná, jakou událost obsluhuje ani o jakou přesně funkci jde.

Příklad: libEvt.demo04.html, libEvt.demo04.js

---

To byl tedy velmi jemný úvod do použití knihovny lib.evt. V dalších příspěvcích budu pokračovat - popíšu s jakými argumenty se dá pracovat uvnitř callback funkce, jak může callback funkce pracovat v různých kontextech, jak zastavit zpracování události, komu všemu prohlížeč rozesílá zprávy a jak mu v tom zabránit a také jak vytvářet a používat vlastní události a ovladače událostí.

Pokud máte nějaké připomínky, např. že píšu nesrozumitelně nebo naopak příliš zjednodušuji, že v tom mám chyby a podobně tak to prosím napište do příspěvků, pokusím se případné připomínky respektovat při psaní dalších článků.

Update:

Kolega mě upozornil že tu nikde není odkaz na stažení samotné knihovny lib.evt, což je trapné. Tak tady je:

• evt.compact.js - standalone verze, která funguje bez jakýchkoli dalších úprav
• evt.js - “čistá” verze, která pro svoje fungování vyžaduje knihovny lib.array a lib.data

---

A ještě něco: sháním spolupracovníka na pozici junior kodéra, případně i senior kodéra. Od juniora se očekává že je vzdělavatelný a hodlá se naučit přinejmenším JavaScript, od seniora že pokud možno už JavaScript víceméně umí. Kromě JS uvítáme i znalosti Javy, PHP, HTML, CSS, webdesignu a podobných věcí. Dynamický kolektiv a atraktivní platové podmínky samozřejmostí. Případní zájemci mi mohou napsat na mail richard.sery@aspectworks.com.

---

Tento článek byl přidán 25.04 2007

---