parametre, event vs özelliği

SORU

14 HAZİRAN 2011, Salı

parametre, event vs özelliği

Parametre, event ve özelliği arasındaki fark nedir?

var h=document.getElementById("a");
h.onclick=dothing1;
h.addEventListener("click", dothing2);

Yukarıdaki kod birlikte ayrı bir yer alır .dosya js, ve onlar mükemmel bir iş hem de.

CEVAP

14 HAZİRAN 2011, Salı

Her ikisi de doğru, ama "" per se ve geliştirici her iki yaklaşım kullanmayı seçti. bir nedeni olabilir en iyi bunların hiçbiri

Olay Dinleyicileri (parametre, event ve IE attachEvent)

Internet Explorer önceki sürümlerinde javascript farklı hemen hemen her diğer tarayıcıdan uygulamak. Bu gibi attachEvent[doc] yöntemini kullanın 9,,: daha az sürümleri ile

element.attachEvent('onclick', function() { /* do stuff here*/ });

Çoğu diğer tarayıcılarda (IE 9 ve üstü dahil) addEventListener[doc] bu şekilde kullanın:

element.addEventListener('click', function() { /* do stuff here*/ }, false);

Bu yaklaşım (DOM Level 2 events) kullanarak, herhangi bir eleman için olayların teorik olarak sınırsız sayıda ekleyebilirsiniz. Sadece pratik sınırlama istemci tarafı hafıza ve her tarayıcı için farklı olan diğer performans sorunları vardır.

Yukarıdaki örnekler anonim bir fonksiyonu[doc] kullanarak temsil eder. Ayrıca bir olay dinleyici işlevi bir referans[doc] kullanarak veya kapatma[doc] ekleyebilirsiniz:

var myFunctionReference = function() { /* do stuff here*/ }

element.attachEvent('onclick', myFunctionReference);
element.addEventListener('click', myFunctionReference , false);

addEventListener bir diğer önemli özelliği de dinleyici olaylar köpürme nasıl tepki vereceğini kontrol eden son parametre, [doc]. Muhtemelen kullanım durumları �'i için standart örnek, geçen yanlış oldum. Satır içi olayları kullanırken attachEvent veya eşdeğer argüman yok.

Satır içi olaylar (HTML özelliği="" özellik ve element.özelliği)

Javascript destekleyen tüm tarayıcılarda, bir olay dinleyicisi içi, HTML kodunda anlamı doğru koyabilirsiniz. Muhtemelen böyle bir şey görmediniz:

<a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>

En deneyimli geliştiriciler bu yöntemi shun, ama işi yok; basit ve doğrudan. Kapatma veya anonim fonksiyonlar burada kullanamazsınız işleyicisi kendisi bir çeşit isimsiz bir işlev olsa da), ve kapsam denetimi sınırlıdır.

Söz diğer yöntem:

element.onclick = function () { /*do stuff here */ };

... bu ifade ile satır içi javascript dışında, daha fazla denetim kapsamında (beri yazıyorsun bir komut dosyası yerine HTML) ve kullanabilirsiniz anonim işlevler, işlev başvuruları ve/veya kilitler.

Satır içi olayları ile Önemli dezavantajı olay dinleyicileri yukarıda açıklanan farklı olarak, sadece bir satır içi olay atanmış olabilir. Satır içi olaylar nitelik olarak öğe/özelliği[doc], üzerine anlam saklı.

Yukarıdaki HTML örnek <a> kullanarak:

var element = document.getElementById('testing');
element.onclick = function () { alert('did stuff #1'); };
element.onclick = function () { alert('did stuff #2'); };

... öğesi tıklandığında, edersinsadece"- ilk onclick özelliği ikinci değeri ile atanan senin üzerine, ve onclick özelliği de HTML. orijinal içi senin üzerine "#2 şeyler Yaptığını görmek Bunu buraya göz atın: http://jsfiddle.net/jpgah/.

Hangisi En iyisidir?

Soru tarayıcı uyumluluğu ve zorunluluk meselesidir. Şu anda bir öğe için birden fazla olay eklemek ister misiniz? Gelecekte olacak mı? Oran olacaktır. attachEvent ve parametre, event gereklidir. Değilse, bir satır içi olay işinizi görecektir.

jQuery ve diğer javascript çerçeveleri bir asi olarak IE geçmişi hakkında endişelenmenize gerek kalmadan çapraz tarayıcı uyumlu kod yazmak DOM seviye farklı tarayıcı uygulamaları genel modellerinde 2 olaylar saklanması. DV tüm çapraz tarayıcı ile aynı kod ve partiye hazır:

$(element).on('click', function () { /* do stuff */ });

Dışarı çık ve sadece bunun için bir çerçeve elde bir şey yok ama. Kolayca eski tarayıcıları dikkat çekmek için kendi küçük yardımcı roll:

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on' evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// example
addEvent(
    document.getElementById('myElement'),
    'click',
    function () { alert('hi!'); }
);

Bunu deneyin: http://jsfiddle.net/bmArj/

Tüm bu dikkate alarak, sürece komut bakıyorsun aldı tarayıcı farklılıkları gözönüne başka bir yol (kod gösterilmeyen soru), bu bölümü kullanarak addEventListener işe yaramaz IE sürümleri daha az 9.

Belgeleri ve İlgili Okuma