Olayları işlemek, jQuery kullanmak için bu büyük nedenlerden bir diğeridir. Nasıl yapılacağı konusunda, jQuery'nin bazı en iyi uygulamaları uygularken basit bir API olarak normalleştirdiği bazı çapraz tarayıcı farklılıkları vardır.
Aslında bilmeniz gereken bir yöntem var: .on()- şu şekilde çalışır:
$("button").on("click", function() ( // do something ));Burada .on()yönteme sadece iki parametre veriyoruz . Olayın adı ("tıklama") ve bu olay o seçimdeki herhangi bir öğede gerçekleştiğinde çalıştırılacak işlev. Oldukça temiz okuyor, değil mi?
Daha önce jQuery deneyimi .bind()olan kişiler .live(),, veya gibi diğer bağlama yöntemlerine aşina olabilir .delegate(). Artık bunlar için endişelenmeyin, modern jQuery hepsini birleştirdi .on()ve her zaman en iyi uygulamayı yapıyor.
Yukarıda yaptığımız gibi bir olayı bağlarken, işleve bir parametre adı ekleyebilirsiniz (ve genellikle akıllıca olur). Bu parametre, işlevin içindeki "olay nesnesi" olacaktır:
$("button").on("click", function(event) ( // event => "the event object" ));Bu olay nesnesi aracılığıyla birçok bilgi alırsınız. Zaten biraz aşinasınız çünkü .preventDefault()ve için kullandık .stopPropagation(). Ancak bu nesnede birçok başka düz bilgi de var. Ne tür bir olay olduğu (birden fazla olayın aynı işlevi çalıştırması durumunda), ne zaman olduğu, nerede olduğu (varsa koordinatlar), hangi öğede gerçekleştiği ve çok daha fazlası gibi şeyler. Kodlama sırasında olay nesnesini düzenli olarak incelemeye değer.
Olaylarla çalışırken son derece önemli olan bir olay delegasyonu kavramı vardır. Çok akıllıca bir modern gün en iyi uygulamasıdır. Kapsam fikrini içerir.
Etkinlik bağlamayı düşünmenin geleneksel bir yolu, "sayfadaki tüm düğmeleri bul ve bunlara bir tıklama etkinliği bağlama" gibidir. Bu tabii ki işe yarıyor, ama şu:
- Çok verimli değil
- Kırılgan
Verimli değil çünkü JavaScript'i, yetkilendirme ile, bulması daha kolay bir öğe bulabileceğiniz zaman tüm bu düğme öğelerini bulmaya zorluyorsunuz.
Kırılgandır çünkü sayfaya daha fazla düğme eklenirse, bağlayıcıyı zaten kaçırmışlardır ve yeniden bağlanmaları gerekecektir.
Olay yetkilendirme ile, bu tıklama olayını DOM ağacında hepsini içeren düğmelerden daha yukarıda olan bir öğeye bağlarsınız. Bir yerde olabilir, documentkendisi olabilir . Tıklama olayını bu üst düzey öğeye bağladığınızda, ona hâlâ yalnızca düğmelerde gerçekleşen tıklamalarla ilgilendiğinizi söylersiniz. Daha sonra, olay köpürmesinin doğası gereği bir düğmeye tıklandığında, o tıklama en sonunda üstteki öğede tetiklenecektir. Ancak olay nesnesi, orijinal tıklamanın bir düğmede olup olmadığını bilir ve bu olayda ateşlemek için ayarladığınız işlev, bu bilgiyi bilerek ya çalışacak ya da çalışmayacaktır.
Bu ekran video kaydında şunu gösteriyoruz:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Biz başka eklendi Şimdi düşünün buna . Herhangi bir olayı yeniden bağlamamıza gerek yok, çünkü olay hala kapsamla mutlu bir şekilde bağlı ve olaylar yeni eklenen metin alanından yine de kabaracak. Bu, özellikle sayfaya düzenli olarak yeni öğeler eklediğiniz web uygulaması ortamlarında kullanışlıdır.
JQuery olay bağlama hakkında bilinmesi gereken başka bir iyi şey de, birbirlerini dışlamamalarıdır. Tam olarak zaten bir tane içeren aynı öğeye başka bir tıklama işleyici eklerseniz, yalnızca bir tane daha ekler. Bir öncekinin üzerine yazmıyorsun. jQuery bunu sizin için oldukça zarif bir şekilde halleder. Önceden bağlanmış bir işlevi gerçekten geçersiz kılmak istiyorsanız, bunları her zaman çözebilirsiniz.
Tam olarak aynı olay ise, diğerinin değil, belirli bir tanesinin bağını çözmek için, olayları ad alanına koymanız gerekeceğini bilmeye değer. Bu, olay adında bir nokta kullanarak olur click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), daha önce bahsetmediğimiz gibi, olayları nasıl çözdüğünüzdür.
Çok sayıda olası DOM olayı vardır. Tıklama, en belirgin olanıdır, ancak çift tıklama, fare girişi ve fare tuşu, tuşa basma ve tuş ekleme, bulanıklaştırma ve değiştirme gibi belirli olanlar ve çok daha fazlası vardır. Listenin tamamı ilginizi çekiyorsa, buna benzer bir tane alabilirsiniz.
Aynı anda birden fazla olayı şu şekilde bağlayabilirsiniz:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Bir olayın gerçekleşmesini beklediğiniz bazı durumlar vardır, ancak bir kez gerçekleştiğinde, artık onu umursamıyorsunuz veya açık bir şekilde artık bağladığınız işlevi ateşlemek istemiyorsunuz. Ne Yani en .one()işlevi ile ilgilidir. Bunun için standart bir kullanım örneği, bir form gönderme düğmesidir (Ajax veya her neyse). Bu bilgileri işleyene ve onlara uygun geri bildirimi verene kadar, bu gönder düğmesini bastıktan sonra büyük olasılıkla devre dışı bırakmak isteyebilirsiniz. Elbette tek kullanım durumu bu değil, ancak bunu aklınızda bulundurun. .one()== yalnızca bir kez.