Owen Little
0 
1746
425
Bugün onu bir adım atacağız ve gerçekten jQuery'nin nerede parladığını göstereceğiz. - olaylar. Geçmiş dersleri takip ettiyseniz, jQuery jQuery Öğreticisinin temel kod yapısını oldukça iyi anlayabilmelisiniz. Başlarken: Temel Bilgiler ve Seçiciler Herhangi bir modern web geliştirici ve neden harika. Bu hafta, sanırım bir kodla ellerimizi kirletme zamanımız geldi ve öğrendik… (ve onunla birlikte gelen tüm korkunç kaşlı ayraçlar) ve ayrıca DOM'un öğelerini ve manipüle etmek için yapabileceğiniz şeyleri nasıl bulduğunuzu öğrendim. jQuery'e Giriş (Bölüm 2): Yöntemler ve İşlevler JQuery'e Giriş (Bölüm 2): Yöntemler ve İşlevler Bu, jQuery web programlama serisine devam eden yeni başlayanların bir parçasıdır. Bölüm 1, projenize nasıl dahil edileceğine ilişkin jQuery temellerini ve seçicileri kapsamıştır. 2. bölümde, devam edeceğiz…. Ayrıca Chrome'da Geliştirici Konsoluna nasıl erişeceğinizi de gösterdim. Chrome Geliştirici Araçları veya Firebug ile Web Sitesi Sorunlarını Çözme Chrome Geliştirici Araçları veya Firebug ile Web Sitesi Sorunlarını Çözme Şimdiye kadar jQuery derslerimi takip ediyorsanız, Bazı kod problemleri ve bunların nasıl düzeltileceği bilinmiyor. İşlevsel olmayan bir kod biti ile karşılaştığımızda, çok… ve jQuery kodunuzu hata ayıklamak için nasıl kullanabilirsiniz?.
Etkinlikler - diğer kullanımların yanı sıra - sayfada meydana gelen olaylara ve kullanıcı etkileşimlerine - sizi tıklatma, kaydırma ve tüm bu hoş şeyler.
Yine de Etkinlik Nedir?
Bir tür grafik arayüzü içeren programlamaya yeni başlayanlar için olaylar, kullanıcı ve uygulama arasındaki her türlü etkileşime atıfta bulunur; veya başka bir işlem tarafından dahili olarak üretilebilir. Uygulamalar hangi olayları seçeceğini seçer “dinle”, ve bu olay tetiklendiğinde, bir şekilde tepki verebilirler.
Örneğin, iPhone ekranınıza hafifçe vurmak bir tek “etkinliğe dokunun” x, y ile tam olarak dokunduğunuz yerin koordinatı. Bir düğme gibi belirli bir nesneye tıklarsanız, düğmenin o olayı dinliyor olması ve buna göre bir eylem gerçekleştirmesi olasıdır. Arayüzün sadece boş bir parçası olsaydı, olaya hiçbir şey eklenmezdi ve bu yüzden hiçbir şey olmayacak.
Parmağınızı ekran boyunca sürüklemek, sürükleme hareketinin başlangıç ve bitiş noktası ve belki de hızı hakkında bilgiler içeren başka bir olay oluşturur. Etkinlikler bize kolay bir yol sağlar olanlara tepki.
Kolay: Tıklayarak
Belki de dinlemesi en kolay olay, bir kullanıcı bir öğeye tıkladığında ateşlenen click olayıdır. Bu belirli bir gerek yok “buton” - Ekrandaki herhangi bir şeye bir olay dinleyicisi ekleyebilirsiniz, ancak bir web geliştiricisi olarak açıkça sezgisel hale getirmeniz gerekir. Mektuptan sahte bir düğme oluşturma bir bir metin paragrafının içine gizlenmiş, ancak biraz aptalca.
Bir olay dinleyicisini eklemek için yöntemler, jQuery'nin geliştirdiği gibi yıllar içinde önemli ölçüde değişti, ancak şu andaki kabul edilen yöntem şudur: on ():
$ (Seçici) .sistem (olay, eylem);Dinlemek için “tık” sınıfın herhangi bir öğesinde olay .beni tıkla, ve ardından, mesajı içeren konsola bir mesaj gönderin. Metin tıkladı elemanın, yapardın:
$ (". clickme"). on ("click", function () console.log ($ (this) .text ()););Buraya gömdüğümüz eylemin, kullandığı isimsiz bir işlev olduğunu görebilmeniz gerekir. bu seçici (hangi jQuery'nin şu anda uğraştığı nesneyi ifade eder) - bu durumda, tıklanan şey. Ardından tıklanan nesnenin metnini ayıklarız ve konsola kaydederiz. Kolay değil mi?
Varsayılan İşlemi Durdur:
Bir noktada, genellikle başka bir şey yapan bir link veya form gönderme düğmesi gibi bir şey eklemek istersiniz. Bu durumda, orijinal eylemin gerçekleştirilmesini istemiyor olabilirsiniz - bunun yerine, biraz süslü AJAX veya özel jQuery büyüsü yapmak istiyorsunuz..
Bu varsayılan eylemin gerçekleşmesini önlemek için, prevDefault adında kullanışlı bir yöntemimiz var. Açıkçası. Bir form için gönder düğmesiyle çalışırken bunun nasıl işe yaradığını görelim
$ ("# myForm"). on ("cancel", function (event) console.log (event); event.preventDefault (); return false;);Burada birkaç değişiklik var - öncelikle Gönder tıklama yerine etkinlik. Bu, kullanıcının yapabileceği bir formla ilgilenirken daha uygundur. sekme boşluk, vurmak girmek, veya bir Gönder düğmesi - tümü formun varsayılan eylemini tetikler. Ayrıca olay değişkenini adsız işleve de aktarıyoruz. olay verisi. Sonra kullandık event.preventDefault () ile bütünlüğünde yanlış dönüş tüm olağan işlemlerin tamamlanmasını durdurmak.
Bu durumda, olayı yalnızca konsola kaydediyor, ancak gerçekte muhtemelen bir sonraki derste ele alacağımız bir AJAX işleyicisi var..
Etkinlikler Sizin Tarafınızdan Tetiklenebilir
Son iki örnekte, bir olayı dinlemek için on yöntemini kullandık, ancak bunun yerine bir yöntem olarak çağırarak da bir olayı elle tetikleyebilirsiniz. Bunu zorlamak için neden kullanabileceğinizi görmek zor. “tık”, odak olayına bakarsak daha mantıklı.
Odak tipik olarak, kullanıcı metin girmek için kutuya tıkladığında bir mesajı ateşlemek için giriş alanları ile birlikte kullanılır - örneğin kullanılacak formatta bir talimat mesajı. Ancak, sayfa yüklendiğinde kullanıcıyı kullanıcı adı alanına zorlamak için de kullanabilirsiniz - böylece giriş bilgilerini hemen yazmaya başlayabilirler..
$ (document) .ready (function () $ ('# username'.focus (););Ayrıca, bu kullanıcı adı alanına bir odak olayı dinleyicisi eklediyseniz, odağı zorladığınızda da tetiklenir. Olaylar bu nedenle hem tetiklenebilir hem de dinlenebilir.
Şimdilik, sayfadaki çeşitli etkinliklere ekleyerek pratik yapın - burada mevcut olan tüm etkinliklerin tam bir listesini bulabilirsiniz - burada bir bağlantı veya düğme ise engelleyici işlevini kullanmayı unutmayın ve konsoldan etkinlik verileriyle ilgili ne tür çıktılar aldığınızı görün.
Bu mini dizideki jQuery öğreticilerinin sonuna yaklaştığımızda bugün orada bırakacağım. Sonunda, sayfanıza bir miktar jQuery atacak ve bir şeyler yapabilecek kadar kendinizden emin olmalısınız. Gelecek hafta, kullanıcıyı rahatsız etmeden arka planda istekleri yüklemenizi ve göndermenizi sağlayan, modern webin önemli bir parçası olan AJAX'a bakacağız..
Her zaman olduğu gibi, geri bildirim, soru, yorum ve sorunlar aşağıda açıklanmaktadır.
Görüntü kredisi: Shutterstock ile dokunmatik ekran