ugrás a tartalomhoz

JavaScript esemény hozzárendelés kényelmesen

Hojtsy Gábor · 2003. Nov. 10. (H), 12.38
A HTML szabvány különböző eseményvezérlő-hozzárendelő attribútumokat támogat, mint az onload, onclick, onmouseover. Ezeket egyre kevesebben használják, tekintve, hogy nem lehet JS támogatást feltételezni a klienstől. Inkább JavaScritből csatlakoztatják az eseménykezelőket, ez azonban igencsak kényelmetlen lehet, ha egy HTML oldalon nagyon sok elemhez kell kezelőket illeszteni. Van megoldás!

Stuart Langridge nemrég publikálta JavaScript Event Sheets nevű megoldását. Ennek alapja egy CSS szerű definíciós formátum, amivel CSS kiválasztókkal csatlakoztathatunk eseménykezelőket HTML elemekhez. A példában egy ilyen definícó szerepel:

img.rollover {

  mouseover: rollover_handler;

  mouseout: rollout_handler;

}


Nos, ez nagyon hasonlít a CSS-re, csupán az a gond, hogy a CSS nem támogat eseménykezelő hozzárendelést, ezért külön JavaScript nyelven írt elemző készült ehhez a formátumhoz. A fenti utasítások az összes olyan képhez hozzárendelik ezeket az eseménykezelőket (JavaScript függvényeket), amelyeknek "rollover" szerepel a class attribútum értékében (azaz ilyen CSS osztályhoz rendeltek).

Ezzel egy a CSS nyelvhez nagyon hasonlító leíró lehetőség adott eseménykezelők HTML elemekhez rendelésére, úgy, hogy az elemeket CSS kiválasztókkal jelölhetjük meg.

Stuart meglévő komponensekből rakta össze kódját, a WebFX XML Extras könyvtárat és Simon Willison GetElementsBySelector() függvényét használta fel. Ez utóbbi teszi lehetővé, hogy JavaScriptből lekérdezhetőek legyenek egy CSS kiválasztóhoz tartozó elemek.