jQuery.click () - onClick

Çok büyük bir jQuery uygulaması var ve tıklama olayları için aşağıdaki iki yöntemi kullanıyorum.

İlk yöntem

HTML

<div id="myDiv">Some Content</div>

jQuery

$('#myDiv').click(function(){
    //Some code
});

İkinci yöntem

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

JavaScript işlev çağrısı

function divFunction(){
    //Some code
}

Uygulamamda birinci veya ikinci yöntemi kullanıyorum. Hangisi daha iyi? Performans için daha mı iyi? Peki ya standart?

Kullanımı $('#myDiv').click(function(){ise daha iyi standart etkinlik kaydı modeli aşağıdaki gibi. (jQuery dahili olarakaddEventListener ve kullanır attachEvent).

Temel olarak bir olayın modern bir şekilde kaydedilmesi , olayları ele almanın göze batmayan bir yoludur. Ayrıca, hedef için birden fazla olay dinleyicisi kaydetmek addEventListener()için aynı hedefi arayabilirsiniz .

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

Neden addEventListener kullanıyorsunuz? (MDN'den)

addEventListener, W3C DOM'da belirtildiği gibi bir olay dinleyicisini kaydetmenin yoludur. Yararları aşağıdaki gibidir:

• Bir olay için tek bir işleyiciden daha fazlasını eklemeye izin verir. Bu, özellikle diğer kütüphaneler / uzantılar kullanılsa bile iyi çalışması gereken DHTML kitaplıkları veya Mozilla uzantıları için kullanışlıdır.
• Dinleyici aktive edildiğinde (yakalama veya köpürme) fazın daha hassas kontrolünü sağlar
• Yalnızca HTML öğelerinde değil, herhangi bir DOM öğesinde çalışır.

Modern etkinlik kaydı hakkında daha fazla bilgi -> http://www.quirksmode.org/js/events_advanced.html

HTML niteliklerini ayarlamak gibi diğer yöntemler , örnek:

<button onclick="alert('Hello world!')">

Veya DOM öğesi özellikleri , örnek:

myEl.onclick = function(event){alert('Hello world');}; 

eskidir ve kolayca yazılabilir.

İşaretlemeyi daha büyük ve daha az okunabilir hale getirdiğinden HTML özelliğinden kaçınılmalıdır. İçerik / yapı ve davranış endişeleri iyi ayrılmış değildir, bu da bir hatanın bulunmasını zorlaştırır.

DOM öğesi özellikleri yöntemiyle ilgili sorun, olay başına 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

Daha iyi performans için yerel JavaScript'i kullanın. Daha hızlı geliştirme için jQuery kullanın. JQuery vs Native Element Performance'daki performans karşılaştırmasını kontrol edin .

Windows Server 2008 R2 / 7 64 bit üzerinde Firefox 16.0 32 bit'te bir test yaptım

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

Tıklama etkinlikleri için Yerel Tarayıcı etkinliklerine karşı jquery tetikleyici veya jQuery'ye karşı Yerel Tıklama Etkinlik Bağlama'yı kontrol edin .

Chrome 22.0.1229.79 Windows Server 2008 R2 / 7 64 bit'te 32 bit test etme

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

Anladığım kadarıyla, sorunuz gerçekten jQuery kullanıp kullanmayacağınızla ilgili değil. Daha doğrusu: Etkinlikleri HTML'de satır içi veya olay dinleyicileri aracılığıyla bağlamak daha mı iyi?

Satır içi bağlama kullanımdan kaldırıldı. Ayrıca bu şekilde yalnızca bir işlevi belirli bir olaya bağlayabilirsiniz.

Bu nedenle olay dinleyicilerini kullanmanızı öneririm. Bu şekilde, birçok işlevi tek bir etkinliğe bağlayabilir ve gerekirse daha sonra bu işlevleri kaldırabilirsiniz. Şu saf JavaScript kodunu düşünün:

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

Bu, çoğu modern tarayıcıda çalışır.

Ancak, projenize zaten jQuery eklerseniz - jQuery: .onveya .clickişlevini kullanmanız yeterlidir .

Bunları birleştirebilir, işlevi tıklamaya bağlamak için jQuery kullanabilirsiniz

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

$('#myDiv').clickJavaScript kodunu HTML'den ayırdığı için daha iyidir . Sayfa davranışını ve yapısını farklı tutmaya çalışmak gerekir . Bu çok yardımcı olur.

Bunu hem standart hem de performans verecek şekilde yapın.

 $('#myDiv').click(function(){
      //Some code
 });

İkinci yöntem basit JavaScript kodu olduğundan ve jQuery'den daha hızlı olduğu için. Ancak burada performans yaklaşık olarak aynı olacaktır.

IMHO, onclick, yalnızca aşağıdaki koşullar gerçekleştiğinde .click yerine tercih edilen yöntemdir:

• sayfada birçok öğe var
• tıklama etkinliği için yalnızca bir etkinlik kaydedilecek
• Mobil performans / pil ömrü konusunda endişelisiniz

Bu fikri, mobil cihazlardaki JavaScript motorlarının aynı nesilde üretilen masaüstü benzerlerinden 4 ila 7 kat daha yavaş olması nedeniyle oluşturdum. Mobil cihazımdaki bir siteyi ziyaret edip jitterli kaydırma aldığımda nefret ediyorum çünkü jQuery tüm olayları kullanıcı deneyimim ve pil ömrüm pahasına bağlıyor. Bir başka yeni destekleyici faktör, ancak bu sadece devlet kurumları ile ilgili bir endişe olsa da;), JavaScript işleminin uzun ... beklemek veya iptal etmek için sürdüğünü belirten bir mesaj kutusu ile IE7 pop-up'ımız vardı. Bu, jQuery aracılığıyla bağlanacak birçok öğe olduğunda meydana geldi.

İşlerde fark. Click () kullanırsanız, birkaç işlev ekleyebilirsiniz, ancak bir öznitelik kullanırsanız, yalnızca bir işlev yürütülür - sonuncusu.

DEMO

HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

JavaScript

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

Performanstan bahsediyorsak, her durumda doğrudan kullanmak her zaman daha hızlıdır, ancak bir öznitelik kullanmak, yalnızca bir işlev atayabilirsiniz.

Endişelerin ayrılması burada anahtardır ve bu nedenle olay bağlayıcılığı genel olarak kabul edilen yöntemdir. Temel olarak mevcut cevapların birçoğu bunu söyledi.

ancak , bildirimsel işaretleme fikrini çok hızlı bir şekilde atmayın. Onun yeri var ve Angularjs gibi çerçevelerle merkez.

<div id="myDiv" onClick="divFunction()">Some Content</div>Bazı geliştiriciler tarafından istismar edildiğinden , bütünün bu kadar ağır bir şekilde utandığına dair bir anlayış olmalı . Böylece, kutsal oranlara ulaştı tables. Bazı geliştiriciler aslındatables tablo verileri için kaçınırlar . Anlamadan hareket eden insanların mükemmel bir örneğidir.

Her ne kadar davranışlarımı görüşlerimden ayrı tutma fikrini sevsem de. İşaretlemenin ne yaptığını bildiren bir sorun görmüyorum ( nasıl yaptığını değil, bu davranış). Bootstraps javascript bileşenleri gibi gerçek bir onClick özniteliği veya özel bir öznitelik biçiminde olabilir.

Bu şekilde, sadece biçimlendirmeye bakarak, javascript olay bağlayıcılarını ters çevirmeye çalışmak yerine ne olduğunu görebilirsiniz.

Dolayısıyla, yukarıdakilere üçüncü bir alternatif olarak, işaretleme içindeki davranışı bildirmek için veri özniteliklerini kullanmak. Davranış görünümden uzak tutulur, ancak bir bakışta neler olduğunu görebilirsiniz.

Önyükleme örneği:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Kaynak: http://getbootstrap.com/javascript/#popovers

Not İkinci örnekle ilgili ana dezavantaj, küresel ad alanının kirlenmesidir. Bu, yukarıdaki üçüncü alternatif veya Açısal ve otomatik tıklama özelliğine sahip ng-click nitelikleri gibi çerçeveler kullanılarak atlatılabilir.

İkisi de farklı amaçlar için kullanılabilmeleri açısından daha iyi değildir . onClick(aslında olmalı onclick) çok daha iyi performans gösterir, ancak orada bir fark göreceğinizden şüpheliyim.

Farklı şeyler yaptıklarını belirtmek gerekir: .clickherhangi bir jQuery koleksiyonuna bağlanabilirken, bağlı olmasını istediğiniz onclicköğeler üzerinde satır içi kullanılması gerekir. Ayrıca, yalnızca bir olayı kullanmaya bağlayabilirsiniz onclick, oysa .clickolayları bağlamaya devam etmenizi sağlar.

Bence, bu konuda tutarlı ve sadece .clickher yerde kullanmak ve tüm JavaScript kodumu bir arada ve HTML'den ayrı tutarım .

Kullanma onclick. Ne yaptığınızı bilmedikçe kullanmak için herhangi bir neden yok ve muhtemelen bilmiyorsunuz.

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

onclick, onmouseover, onmouseout, vb. olaylar aslında performans için kötüdür ( esas olarak Internet Explorer'da , şekil verin). Visual Studio'yu kullanarak kod yazarsanız, bunlarla bir sayfa çalıştırdığınızda, bunların her biri ayrı bir SCRIPT bloğu oluşturur ve bu da belleği alır ve performansı yavaşlatır.

Endişelerin ayrılması gerektiğini söylememeliyiz : JavaScript ve düzenler ayrılmalıdır!

Bu olaylardan herhangi biri için evenHandlers oluşturmak her zaman daha iyidir, bir olay her biri için binlerce ayrı komut dosyası bloğu oluşturmak yerine yüzlerce / binlerce öğeyi yakalayabilir!

(Ayrıca, herkesin söylediği her şey.)

Eh, arkasındaki ana fikirlerin bir jQuery pis JavaScriptlerin ayırmaktır HTML kodu. İlk yöntem gidilecek yoldur.

Çoğu zaman, yerel JavaScript yöntemleri, performans tek kriter olduğunda jQuery'den daha iyi bir seçimdir, ancak jQuery JavaScript'i kullanır ve geliştirmeyi kolaylaştırır. Performansı çok fazla düşürmediği için jQuery kullanabilirsiniz. Özel durumunuzda, performans farkı göz ardı edilebilir.

Kullanmanın ilk yöntemi onclickjQuery değil, sadece Javascript'tir, bu nedenle jQuery yükünü alamazsınız. JQuery yolu, her öğeye olay işleyicisi eklemeden başka öğelere eklemeniz gerektiğinde seçiciler yoluyla genişletilebilir, ancak şimdi sahip olduğunuzda jQuery kullanmanız gerekip gerekmediği sadece bir sorudur.

Şahsen jQuery kullandığınızdan beri ben tutarlı ve kodlama biçimlendirme ayrıştırır gibi onunla sopa.

İlk yöntem tercih etmektir. Aynı öğeye birden çok işleyici ekleyebileceğiniz anlamına gelen gelişmiş olay kayıt modelini [s] kullanır . Olay nesnesine kolayca erişebilirsiniz ve işleyici herhangi bir işlevin kapsamında yaşayabilir. Ayrıca, dinamiktir, yani herhangi bir zamanda çağrılabilir ve özellikle dinamik olarak oluşturulan elemanlar için çok uygundur. İster jQuery, ister başka bir kütüphane veya yerel yöntemler kullanın, gerçekten önemli değildir.

Satır içi nitelikleri kullanan ikinci yöntem, çok sayıda küresel işleve ihtiyaç duyar (ad alanı kirliliğine yol açar) ve içeriği / yapıyı (HTML) davranışla (JavaScript) karıştırır. Bunu kullanma.

Performans veya standartlarla ilgili sorunuz kolayca cevaplanamaz. İki yöntem tamamen farklıdır ve farklı şeyler yaparlar. Birincisi daha güçlü, ikincisi hor görülüyor (kötü stil olarak kabul edilir).

Onclick İşlev Jquery

$('#selector').click(function(){ //Your Functionality });