JQuery on () Yöntemi nedir ve nasıl kullanılır?

İçindekiler

jQuery HTML belgeleriyle etkileşimin yolunu basitleştirmeye, DOM ağacını işlemeye, olayları işlemeye, animasyonlar geliştirmeye ve teknikle etkileşim eklemeye olanak tanıyan bir Javascript kitaplığıdır. AJAX web sayfalarına.
jQuery'nin 1.7 sürümünden bu yana, olayları yönetmek için bize gerekli tüm işlevleri sunan on () yöntemine sahibiz. Bu yöntem sayesinde artık eski bağlama (), canlı () veya delege ()'ye ihtiyacımız yok, ancak blur (), odak (), tıklama (), vurgulu () ve diğerlerine de ihtiyacımız yok.
Tıpkı on () olduğu gibi, on () ile atanan olayları kaldıran bunun tersi kapalı () var.
on() yöntemini daha iyi anlamak için bir dizi örnek göreceğiz.
Bir düğmeye tıklandığında bir işlevi yürütmek istediğimizi varsayalım:
 (işlev () {$ ('düğme') tıklayın (işlev () {// yürütülecek kod});}) ();

Sanki geleneksel olarak click() ile yapıyormuşuz gibi. Ancak jQuery koduna bakarsak, gerçekte olanın on () yönteminin çağrılmakta olduğunu görürüz, bu yüzden yapılacak en hızlı şey:
 (işlev () {$ ('düğme'). on ('tıklama', işlev () {// yürütülecek kod});}) ();

Bu en doğrudan yoldur. Ve change (), hover (), mouseenter (), vb …
jQuery'ye bakalım. 1.7 veya sonraki bir sürümü indirirsek ve koduna bakarsak, aşağıdakileri göreceğiz:
 jQuery.each ("bulanıklaştırma odak odaklama odaklama yeniden boyutlandırma kaydırma boşaltma tıklama dbltıklama fareyi aşağı yukarı fareyi yukarı kaydırma fareyi hareket ettirme fareyi fareyi gezdirme fare terketmeyi seç gönder tuşa basma tuşa basma hata bağlam menüsü"). bölme (""), f işlevi (i, ad) {// Handle olay bağlama jQuery.fn [name] = function (data, fn) {if (fn == null) {fn = data; data = null;} dönüş argümanları.length -> 0? This.on (name, null, data, fn): this.trigger (ad);};

Buradan sadece “blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, gönder, tuşa basma, tuşa basma, tuşa basma, hata ve bağlam menüsü "en sonunda" this.on (ad, boş, veri, fn) ".
bağlama (), canlı () ve temsilci ()
Geçmişte de yapıldı:
 (fonksiyon () {$ ('düğme') bind ('tıklama', işlev () {// butona tıklandığında çalıştırılacak kod});}) ();

Veya belgeye yeni "düğme" öğeleri ekledikten sonra bile olayın çalışmasını istiyorsak, live () yöntemini kullanırdık:
 (işlev () {$ ('düğme') canlı ('tıklama', işlev () {// düğmeye tıklandığında çalıştırılacak kod});}) ();

Daha sonra, jQuery, bir bağlama bir olay atamamıza izin veren "delegate ()" özelliğini tanıttı. Örneğin, düğme "container" sınıfına sahip bir div içindeyse (veya daha sonra eklenmişse olacaksa):
 (function () {$ ('div.container').delege ('düğme', 'tıklama', işlev () {// düğme tıklandığında çalıştırılacak kod});}) ();

Ancak öncekilerde olduğu gibi, hem bind (), hem live () hem de delege () tek yaptıkları on () yöntemini çağırmaktır.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.

Arkadaşlarınızla sayfasını paylaşan sitenin gelişimine yardımcı olacak

wave wave wave wave wave