Mám obrovskú aplikáciu jQuery a pre udalosti kliknutia používam dve nižšie uvedené metódy.
Prvá metóda
<div id="myDiv">Some Content</div>
$('#myDiv').click(function(){
//Some code
});
Druhá metóda
<div id="myDiv" onClick="divFunction()">Some Content</div>
function divFunction(){
//Some code
}
V mojej aplikácii používam buď prvú alebo druhú metódu. Ktorá z nich je lepšia? Lepšie z hľadiska výkonu? A štandardná?
Použitie $('#myDiv').click(function(){
je lepšie, pretože dodržiava štandardný model registrácie udalostí. (jQuery interne používa addEventListener
a attachEvent
).
Registrácia udalosti moderným spôsobom je v podstate nenápadný spôsob spracovania udalostí. Ak chcete pre cieľ zaregistrovať viac ako jedného poslucháča udalosti, môžete pre ten istý cieľ zavolať addEventListener()
.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
Prečo používať addEventListener? (Z MDN)
addEventListener je spôsob registrácie poslucháča udalosti, ako je uvedené v dokumente W3C DOM. Jeho výhody sú nasledovné:
- Umožňuje pridať viac ako jeden obslužný program pre udalosť. Je to užitočné najmä pre knižnice DHTML alebo rozšírenia Mozilly, ktoré musia dobre fungovať aj v prípade, že sa používajú iné knižnice/rozšírenia.
- Umožňuje jemnejšiu kontrolu nad fázou, kedy sa poslucháč aktivuje (zachytávanie vs. bublinkovanie)
- Funguje na akomkoľvek prvku DOM, nielen na prvkoch HTML.
Viac o modernej registrácii udalostí -> http://www.quirksmode.org/js/events_advanced.html
Ďalšie metódy, ako napríklad nastavenie HTML atribútov, napr:
<button onclick="alert('Hello world!')">
Alebo vlastnosti prvku DOM, príklad:
myEl.onclick = function(event){alert('Hello world');};
sú staré a možno ich ľahko prepísať.
Atribútu HTML by ste sa mali vyhýbať, pretože zväčšuje značku a robí ju menej čitateľnou. Záujmy o obsah/štruktúru a správanie nie sú dobre oddelené, čo sťažuje nájdenie chyby.
Problém s metódou DOM element properties spočíva v tom, že na jednu udalosť možno viazať len jednu obsluhu udalosti.
Viac o tradičnom spracovaní udalostí -> http://www.quirksmode.org/js/events_tradmod.html
Odkaz MDN: https://developer.mozilla.org/en-US/docs/DOM/event
Prvou metódou je uprednostniť. Využíva pokročilý model registrácie udalostí, čo znamená, že k tomu istému prvku môžete pripojiť viacero obslužných programov. K objektu udalosti môžete ľahko pristupovať a obsluha môže bývať v ľubovoľnom rozsahu funkcie's. Taktiež je dynamický, t. j. môže byť vyvolaný kedykoľvek a je obzvlášť vhodný pre dynamicky generované prvky. Je úplne jedno, či použijete jQuery, inú knižnicu alebo priamo natívne metódy.
Druhá metóda, ktorá používa inline atribúty, potrebuje veľa globálnych funkcií (čo vedie k znečisteniu menného priestoru) a mieša obsah/štruktúru (HTML) so správaním (JavaScript). Nepoužívajte to.
Na vašu otázku o výkone alebo štandardoch sa nedá jednoducho odpovedať. Tieto dve metódy sú jednoducho úplne odlišné a robia odlišné veci. Prvá je výkonnejšia, zatiaľ čo druhou sa pohŕda (považuje sa za zlý štýl).