lib.js – funkcia getElem()

V minulom článku som začal písať o udalostnom skriptovaní. Vyzerá to, že séria článkov sa bude uberať aj smerom širšieho vysvetlenia funkcie knižnice lib.js. V sérii lib.js objasním funkciu niektorých častí knižnice lib.js. Budem sa snažiť používať názvy objektov podľa DOM 2: HTML.

Začneme s funkciou getElem(). Funkcia vráti referenciu na prvok v dokumente podľa ID, podobne ako document.getElementById(id). Funguje však aj v prehliadačoch bez podpory getElementById().

// C# syntax
HTMLElement getElem(DOMString el);
HTMLElement getElem(HTMLElement el);

// Java syntax
getElem(el : DOMString) : HTMLElement;
getElem(el : HTMLElement) : HTMLElement

Funkcia getElem() sa chová takto:

• ak je argument el text, tak funkcia vráti referenciu na prvok v dokumente, ktorý ma atribút id="" rovnajúci sa hodnote el,
• ak je argument el už existujúci prvok (HTMLElement), tak vráti tento prvok.

var elm  = getElem("menu"); // DOMString
var elm1 = getElem(elm);  // HTMLElement

// elm aj elm1 sú referenciou na ten istý prvok

Toto chovanie sa veľmi využíva v internom kóde lib.js. Umožňuje používať rôzne zápisy kódu s rovnakou funkčnosťou (v podstate preťažovanie funkcií). Je výhodné podobne písať aj vlastné funkcie, ktoré pracujú s elementami v dokumente.

Príklad: funkcia addEvent() má prvý argument element, na ktorý bude naviazaná udalosť. Vďaka internému použitiu getElem v addEvent() je možné použiť tieto zápisy, pričom každý má rovnaký význam:

var elm = getElem("menu");
addEvent(elm, "click", function() { alert("kliknutie!"); });
//alebo
addEvent("menu", "click", function() { alert("kliknutie!"); });

Funkcia addEvent() principiálne vyzerá takto:

function addEvent(el, evt, fn) {
  el = getElem(el);
  // vo funkcii bude el vždy odkazovať na prvok, či už je argument typu DOMString alebo HTMLElement
  ...
}