Büyük bir jQuery uygulamam var ve tıklama olayları için aşağıdaki iki yöntemi kullanıyorum.
İlk yöntem
<div id="myDiv">Some Content</div>
$('#myDiv').click(function(){
//Some code
});
İkinci yöntem
<div id="myDiv" onClick="divFunction()">Some Content</div>
function divFunction(){
//Some code
}
Ben uygulamamda ya birinci ya da ikinci yöntemi kullanıyorum. Hangisi daha iyi? Performans açısından daha mı iyi? Ve standart?
Standart olay kayıt modelini takip ettiği için $('#myDiv').click(function(){
kullanmak daha iyidir. (jQuery dahili olarak addEventListener
ve attachEvent
kullanır).
Temel olarak bir olayı modern şekilde kaydetmek, olayları ele almanın göze batmayan yoludur. Ayrıca hedef için birden fazla olay dinleyicisi kaydetmek için aynı hedef için addEventListener()
çağırabilirsiniz.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
Neden addEventListener kullanılmalı? (MDN'den)
addEventListener, belirtildiği gibi bir olay dinleyicisini kaydetmenin yoludur W3C DOM'da. Faydaları aşağıdaki gibidir:
Bir olay için tek bir işleyiciden daha fazlasını eklemeye izin verir. Bu özellikle DHTML kütüphaneleri veya Mozilla uzantıları için kullanışlıdır. diğer kütüphaneler/uzantılar kullanılsa bile iyi çalışması gerekir.
- Dinleyicinin etkinleştirildiği aşama üzerinde daha ince taneli kontrol sağlar (yakalama ve kabarcıklanma)
- Sadece HTML öğeleri üzerinde değil, herhangi bir DOM öğesi üzerinde çalışır.
Modern etkinlik kaydı hakkında daha fazla bilgi -> http://www.quirksmode.org/js/events_advanced.html
HTML özniteliklerini]7 ayarlamak gibi diğer yöntemler, örn:
<button onclick="alert('Hello world!')">
Veya DOM öğesi özellikleri, örnek:
myEl.onclick = function(event){alert('Hello world');};
eskidir ve üzerlerine kolayca yazılabilir.
İşaretlemeyi daha büyük ve daha az okunabilir hale getirdiği için HTML özniteliğinden kaçınılmalıdır. İçerik/yapı ve davranış kaygıları iyi ayrılmamıştır, bu da bir hatanın bulunmasını zorlaştırır.
DOM öğe özellikleri*** yöntemiyle ilgili sorun, her olay için bir öğeye yalnızca bir olay işleyicisinin bağlanabilmesidir.
Geleneksel olay işleme hakkında daha fazla bilgi -> http://www.quirksmode.org/js/events_tradmod.html
MDN Referansı: https://developer.mozilla.org/en-US/docs/DOM/event
İlk yöntem tercih etmektir. Gelişmiş olay kayıt model[ler]ini](http://www.quirksmode.org/js/events_advanced.html) kullanır, bu da aynı öğeye birden fazla işleyici ekleyebileceğiniz anlamına gelir. Olay nesnesine kolayca erişebilirsiniz ve işleyici herhangi bir işlevin kapsamı içinde yaşayabilir. Ayrıca dinamiktir, yani herhangi bir zamanda çağrılabilir ve özellikle dinamik olarak oluşturulan öğeler için çok uygundur. İster jQuery, ister başka bir kütüphane veya doğrudan yerel yöntemleri kullanın, gerçekten önemli değildir.
Satır içi nitelikleri kullanan ikinci yöntem, çok sayıda global fonksiyona ihtiyaç duyar (bu da isim alanı kirliliğine yol açar) ve içerik/yapı (HTML) ile davranışı (JavaScript) karıştırır. Bunu kullanmayın.
Performans veya standartlarla ilgili sorunuz kolayca yanıtlanamaz. İki yöntem tamamen farklıdır ve farklı şeyler yaparlar. Birincisi daha güçlüdür, ikincisi ise hor görülür (kötü bir tarz olarak kabul edilir).