Domov › Téma › Coding

Pokročilé používanie eventov v javascripte

26. Január 2007 - 6:00 od zero0x

Buďte si istí: pri programovaní interaktívnych aplikácii sa používaniu eventov nevyhnete. Predpokladam, že už viete čo to je a na čo to je. Ak nie, nemôžem vynechať určitý úvod.

Úvod:Určite ste už programovali funkciu, ktorá sa vykoná pri určitej príležitosti.Napríklad: <input type="button" onclick="spracuj"> Toto tlačítko ma nastavené onclick="spracuj()". Takže, to by nebolo nič zvláštne, úplne bežná situácia. Vlastne toto je event, aj bez hocičoho ďalšieho. Avšak, to čo chcem rozpísať zachádza trošku ďalej. Takže vieme, že bolo kliknuté na tlačitko, lebo sa zavolala funkcia spracuj(). Ale ktorým tlačítkom bolo naňho kliknuté? Ešte viac sa vám to hodí pri udalosti onkeydown - ktorá sa vykonáva pri stlačení klávesu. Ale ktorý kláves bol stlačený?

Ako vidíte, využitie je veľké. Asi Vás napadá načo je treba rozpisovať, niečo čo vyzerá úplne jasne. Odpoveď je ono to až také jasné nie je. A to kôli dosť problémovej nekompatibilite medzi prehliadačmi.Problém je v tom, že v každom prehliadači sa tieto eventy spracúvaju inak.

Čo sa snažíme zistiť?

  • aký typ eventu vlastne nastal? (kliknutie, stlačenie klávesy, atď)
  • v ktorom elemente event nastal
  • aké tlačitko bolo stlačené?
  • aký kláves bol stlačený?

Tieto otázky Vás asi najčastejšie zaujímajú, alebo ich najčastejšie využijete. Poďme sa na ne pozrieť.

Začnime funkciou, ktorá dostane event vo všetkých prehliadačoch. Keďže v niektorých prehliadačoch je potrebné zasielať event už pri volaní funkcie pod menom event, funkciu zavoláme takto: onclick="spracuj(event)". Vôbec Vás nemusí zaujímať či je premenná event definovaná alebo nie, ona je totiž definovaná iba v niektorých prehliadačoch, takže ju tam musíte dať, aby to v tých niektorých prehliadačoch fungovalo. Ostatné ju budú ignorovať.Potom budeme mať funkciu spracuj(). Všímajte si komentáre:

function spracuj(e) { //do funkcie je posielana premenna event, ktoru sme zapisovali pri onclick
if (!e) var e = window.event; //ak nie je definovana, cize pouzivame prehliadac, ktory ju nepouziva, skusime ju ziskat inou cestou. vsimnite si, ze musime pouzit aj var, pretoze nie je definovana
alert(e.type); //zobrazime typ eventu
}

Takže ako vidíte, už sme aj vyriešili prvú úlohu. typ eventu sa sprístupní jednoducho zadaním .type. Toto našťastie funguje vo všetkých prehliadačoch.

Teraz sa pozrime, ako získať element, ktorý spôsobil vykonanie eventu. premennú e už máme, ale ukážme si aj ľahšiu cestu ako ju nájsť.

function spracuj(e) {
e = (e) ? (e) : (window.event);
}

Toto je zjednodušená podmienka. Do premennej e sa uloží: ak je definovaná e, tak e, inak window.event.

Pokračujme však pri zisťovaní elementu.

function spracuj(e) {
var ele; //vytvorime si premennu, ktora bude uchovavat hladany element
e = (e) ? (e) : (window.event); //ziskame event
if (e.target) ele = e.target; //pozrieme sa ci existuje e.target. ak ano, ulozime ho do e
else if (e.srcElement) ele = e.srcElement; //a ak neexistuje, skusime ci existuje srcElement, a ak ano, ulozime
alert(ele.nodeType); //zobrazime typ elementu, ktory sme hladali

}
Takže ďalej: ktorý kláves bol stlačený?

function spracuj(e) {
var kod;
e = (e) ? (e) : window.event;
if (e.keyCode) kod = e.keyCode; //ak existuje keyCode, ulozime ho do kodu
else if (e.which) kod = e.which; //ak existuje which ulozime ho do kodu
alert(kod); //zobrazime kod (ciselny)
}

Teraz si môžete ľahko napísať aplikáciu, ktorá dokáže rozoznávať ktorý klaves bol stlačený. Stačí ak si zistíte, akým čislam sú jednotlivé klávesy priradené, a dáte ich do podmienok if.

Ešte zostáva zistiť, ktoré tlačitko na myši bolo stlačené, ale asi ste si už všimli, ako jednoducho to ide, tak vám dám iba atributy, kde treba hľadať.

Je to: e.which a e.button. Ale pozor, ak máte toto, ešte ste nevyhrali. Problémom je, že každý vracia nejaké iné čisla:

which: ľavé: 1; stredné: 2; pravé: 3;

button (pod microsoftom): ľavé: 1; stredné: 4; pravé: 2;

buttom (štandard): ľavé: 0; stredné: 1; pravé: 2;

Ako vidíte, spracovávanie týchto čísel je dosť náročné, ale pravdupovediac toto veľmi často nevyužijete.

Takže to je všetko zatiaľ o eventoch, prajem vám veľa úspešných char-codes!

pozn: tento článok vyšiel pôvodne na novom blogu o web2.0 technológiach a technikách.