Minulla on valtava jQuery-sovellus, ja käytän alla olevia kahta menetelmää napsautustapahtumille.
Ensimmäinen menetelmä
<div id="myDiv">Some Content</div>
$('#myDiv').click(function(){
//Some code
});
Toinen menetelmä
<div id="myDiv" onClick="divFunction()">Some Content</div>
function divFunction(){
//Some code
}
Käytän sovelluksessani joko ensimmäistä tai toista menetelmää. Kumpi on parempi? Parempi suorituskyvyn kannalta? Ja standardi?
Käyttämällä $('#myDiv').click(function(){
on parempi, koska se noudattaa tavallista tapahtuman rekisteröintimallia. (jQuery sisäisesti käyttää addEventListener
ja attachEvent
).
Periaatteessa tapahtuman rekisteröinti nykyaikaisella tavalla on huomaamaton tapa käsitellä tapahtumia. Voit myös rekisteröidä useamman kuin yhden tapahtumakuuntelijan kohteelle kutsumalla addEventListener()
samalle kohteelle.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
Miksi käyttää addEventListeneriä? (MDN:stä)
addEventListener on tapa rekisteröidä tapahtumakuuntelija määritellyn mukaisesti. W3C DOM:ssa. Sen edut ovat seuraavat:
- Se mahdollistaa useamman kuin yhden käsittelijän lisäämisen tapahtumalle. Tämä on erityisen hyödyllistä DHTML-kirjastoille tai Mozilla-laajennuksille, jotka ovat on toimittava hyvin, vaikka muita kirjastoja/laajennuksia käytettäisiin.
- Se antaa sinulle tarkemman hallinnan vaiheesta, jossa kuuntelija aktivoituu (capturing vs. bubbling).
- Se toimii minkä tahansa DOM-elementin, ei vain HTML-elementtien, kanssa.
Lisätietoja modernista tapahtumarekisteröinnistä -> http://www.quirksmode.org/js/events_advanced.html
Muut menetelmät, kuten HTML-attribuuttien asettaminen, esim:
<button onclick="alert('Hello world!')">
Tai DOM-elementin ominaisuudet, esim:
myEl.onclick = function(event){alert('Hello world');};
ovat vanhoja ja ne voidaan helposti kirjoittaa yli.
HTML-attribuuttia tulisi välttää, koska se tekee merkinnästä suuremman ja vähemmän luettavan. Sisältöön/rakenteeseen ja käyttäytymiseen liittyvät asiat eivät ole hyvin erillään toisistaan, mikä vaikeuttaa vian löytämistä.
DOM-elementin ominaisuudet -menetelmän ongelmana on, että elementtiin voidaan sitoa vain yksi tapahtumankäsittelijä per tapahtuma.
Lisätietoja perinteisestä tapahtumankäsittelystä -> http://www.quirksmode.org/js/events_tradmod.html
MDN-viite: https://developer.mozilla.org/en-US/docs/DOM/event
Ensimmäinen tapa on suosia. Se käyttää [kehittynyttä tapahtumien rekisteröintimallia[s]] (http://www.quirksmode.org/js/events_advanced.html), mikä tarkoittaa, että voit liittää useita käsittelijöitä samaan elementtiin. Voit helposti käyttää tapahtumaobjektia, ja käsittelijä voi asua minkä tahansa funktion'n vaikutusalueella. Lisäksi se on dynaaminen, eli sitä voidaan kutsua milloin tahansa, ja se soveltuu erityisen hyvin dynaamisesti tuotetuille elementeille. Sillä, käytätkö jQuerya, muuta kirjastoa vai natiiveja menetelmiä suoraan, ei ole väliä.
Toisessa menetelmässä, jossa käytetään inline-attribuutteja, tarvitaan paljon globaaleja funktioita (mikä johtaa nimiavaruuden saastumiseen) ja sekoittaa sisällön/rakenteen (HTML) ja käyttäytymisen (JavaScript). Älä käytä sitä.
Kysymykseesi suorituskyvystä tai standardeista ei voi vastata helposti. Nämä kaksi menetelmää ovat vain täysin erilaisia ja tekevät eri asioita. Ensimmäinen on mahtavampi, kun taas toista halveksitaan (pidetään huonona tyylinä).