JavaScript je ZLO 2.0

nenávistné poznámky vzteklého kodéra

Argumenty event handleru v lib.evt

V předchozím článku jsem popsal, jak zaregistrovat ovladač události a zmínil jsem, že jde o callback funkci. To je taková, která se zavolá automaticky. Naznačil jsem také, že prohlížeč callback funkci předá nějaké argumenty, ale zatím nevíme jaké. A právě o tom bude následující příspěvek.

Jak se to dělá bez lib.evt…

Jestliže bychom nepoužili knihovnu lib.evt a zaregistrovali event handler některým z běžných způsobů, např.

myButton.onclick = myCallback;

zavolá prohlížeč event handler jen s jedním parametrem - předá mu objekt události, to znamená zprávu o události která nastala:

myCallback(e);

Teoreticky by tato zpráva měla obsahovat všechny podstatné informace, nicméně praxe není ideální a některé prohlížeče nám mohou poskytnout nekompletní nebo nepřesné údaje.

… a jak to funguje s lib.evt

Zaregistrujeme-li ovladač události funkcí lib.evt.add, knihovna lib.evt zajistí volání callback funkce hned se třemi argumenty:

myCallback(elm, e, evId);
  • do elm doplní referenci na element DOMu pro který je handler registrován
  • do e doplní objekt události.
  • do evId doplní unikátní id event handleru. To lze využít například tehdy když je potřeba v callback funkci event handler odregistrovat.

Příklad: Mějme tlačítko

<input type="button" id="myButton" value="Click me" />

Připojíme k němu callback funkci

var myButton = document.getElementById("myButton");

var myCallback = function (elm, e, evId) {
    var elmValueStr = "Button value: " + elm.value + "\n";
    var evtTypeStr = "Event type: " + e.type + "\n";
    var evIdStr = "Event handler ID: " + evId + "\n";
    alert(elmValueStr + evtTypeStr + evIdStr);
};

var evId = lib.evt.add(myButton, "click", myCallback);

Kliknutím na tlačítko způsobíme volání callback funkce myCallback(myButton, e, evId) a v alertu se vypíše něco jako

Button value: Click me
Event type: click
Event handler ID: 2

Proč zrovna tyhle argumenty?

Použití právě těchto tří argumentů se ukázalo jako nejpraktičtější. Naprostá většina callback funkcí si vystačí s prvním z nich - callback funkce skoro vždy potřebuje vědět s kterým elementem má pracovat. Má to navíc tu výhodou že takovou funkci můžeme použít i normálním přímým voláním, nejen jako callback, což se často využívá.
Druhý argument je málokdy zapotřebí, ale občas je zpráva o události užitečná, zvláště používáme-li event delegation.
Třetí argument se používá skutečně minimálně (jak často potřebujete v event handleru zrušit jeho registraci?) ale čas od času se také může hodit, kdo ví?

Toto složení argumentů má i další výhody, hlavně co se týče kompatibility prohlížečů, nicméně pro praktické použití to není podstatné, stačí vědět že to funguje a funguje to spolehlivě.

No a to je všechno, ani to nebolelo. Doufám že je to jasné, pokud ne můžu přidat i nějaký fungující příklad (ale jsem dost líný tak jestli je to jasné nebudu se obtěžovat).

Update:

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

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

Tři komentáře k článku “Argumenty event handleru v lib.evt”

  1. Tuzticzka: 2008-03-04

    Zdravím,
    tento blog je podle mne vážně hodně dobrý - člověk se konečně dozví něco užitečného ve srozumitelné podobě :-)
    Pár dní nazpět jsem si hrál s tou knihovnou(btw, google ji najde jenom zde, na netu jinak není) ale při zjišťování keyCode při keydown(resp. keypress) jsem docela narazil. Doufal jsem v hodnotu, kterou vrací lib.evt.getKey(), ale to funguje pouze pod IE a Operou :( Ve FireFoxu vrací null(jiné prohlížeče jsem nezkoušel).
    Není třeba některého z dalších parametrů při volání lib.evt.add? Nyní používám toto:

    lib.evt.add(document,”keydown”,ovladac);

    Díky moc za radu

  2. richard: 2008-03-15

    Díky za pochvalu, potěší :-)
    Knihovny jako je lib.js a lib.evt jsem nikde moc nepublikoval, lidi kteří je používají je mají nebo si o ně napíšou a na udržování nějakého open source projektu nějak nemám ani čas ani energii.

    Ten getKey tam asi bude opravdu špatně, jeden kolega mi to cca před měsícem hlásil ale ještě jsem se nedostal k tomu abych to opravil.
    Minulý týden jsem ale psal skript na psaní tabelátorů v textarea, kde mi tabelátory fungují i ve FF, takže to podle toho co nejdříve spravím a jestli to dobře doapdne tak sem i postnu ten skript.

  3. Srigi: 2008-11-21

    Cau Richard, tvoj framework sa mi zacina pacit, ale odkazy na stiahnutie si musi clovek hladat v clankoch. Nemohol by si pls zapnut prechadzanie adresarov v /download/js ?

Přidejte komentář

For spam detection purposes, please copy the number 8992 to the field below:

Weblog "JavaScript je ZLO 2.0" pohání všelijak překopaný WordPress,
XHTML je skoro validní, celkem respektuje Dogma W4 ale ne úplně