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útid=""
rovnajúci sa hodnoteel
, - 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
...
}