JQuery ile olay işleme

NS Etkinlikler belgemizde meydana gelen durumlardır HTML, sistemin kendi durumları veya kullanıcı eylemleri tarafından tetiklenebilir. Her iki durumda da, bir olay meydana geldiğinde, kullanarak bir son işlem yapmak mümkündür. jQuery, böylece programlarımızda daha iyi efektler elde edebiliriz.
Bu son derece önemlidir, çünkü bu yönü bilerek ve çerçeve yardımıyla web sayfalarımıza ve uygulamalarımıza daha fazla dinamizm kazandırabiliriz.
Olaylarla çalışırken yanıtlamamız gereken ilk şey budur. jQuery, Olayların sistem veya kullanıcı tarafından tetiklenen eylemler veya durumlar olduğunu daha önce söylemiştik, örneğin belgenin yüklenmesi bittiğinde sistem olayı tetikler hazır veya hazır, bir kullanıcı bir öğeye tıkladığında eşsesli bir olay tetiklenir.
Bu küçük örnekleri göz önünde bulundurarak, aşağıdaki gibi her tür olayı işlemek için temel sözdizimini görebiliriz:

$ (seçici) .on ("eventName", function () {….})

Seçicinin belgemizdeki öğeyi bulacağımız isim olduğunu hatırlayalım veya açıklığa kavuşturalım, ardından yöntemin yardımıyla .üzerinde () Daha sonra hangi olayı dinlemesi gerektiğini söyleyebiliriz ve bunu algıladığında, komut dosyası bölümümüzde adsız bir işlev yürütebilir. HTML.
Vurgulayabileceğimiz ilginç bir şey, bir çeşitli etkinlikler için işleyiciBaşka bir deyişle, aynı eylemi birkaç durum için gerçekleştirebiliriz, yalnızca dinlenmesi gereken farklı olayları listelememiz yeterlidir, sözdizimi az önce gördüğümüze çok benzer.
$ (seçici) .on ("eventname1 eventname2 eventname3….", function () {….})
En temel olanı bildiğimize göre, şunu da bilmeye başlamalıyız. jQuery Geliştiriciler olarak hayatımızı her zaman kolaylaştıracak, bu yüzden olay işleyicileri oluşturmak için bazı kısayollar sağladı, bununla önceki bölümde gördüğümüz gibi tam bildirimi yapmak zorunda değiliz, ancak bu kısayolları doğrudan seçiciye uyguluyoruz.
Geliştiriciler tarafından kullanılan en ilginç kısayollardan bazılarını görelim, mevcut olanların tam listesi olmadığını belirtmek gerekir, bu listeyi elde etmek için doğrudan resmi belgelere gitmek daha iyidir, ancak küçük bir başlangıç ​​​​yapmak daha iyidir. konu, bunlar fazlasıyla yeterli.
hazır ()Belgenin tüm öğeleri çalıştırıldığında GÜNEŞ yüklenirler, yani site hazır olduğunda, dolayısıyla adı. Bunun bir sistem olayı olduğuna dikkat edilmelidir.
Sunmak ()yaptığımızda oluyor form göndermeİlginç olan şu ki, form oluştuğunda, geleneksel yolla göndermiyor, bunun yerine bu olayın ona ne söyleyeceğini bekliyor, bu yüzden onu kullanım örneğinden bahsetmek için alan doğrulamaları için bir ara nokta olarak kullanabiliriz.
Tıklayın ()Kullanıcı yaptığında çalışır Tıklayın fare imleci bir öğenin üzerindeyken, bir giriş türü alanından olabilir, aşağıdaki gibi öğeleri dahil edebilir: veya çapalar . Kullanıcı tarafından tetiklenen bir olay olduğunu nasıl anlayabiliriz.
bulanıklık ()Şu anda üzerinde bulunduğumuz öğe odak dışında olduğunda, örneğin bir metin alanına yazıyoruz ve bir sonraki alana gittiğimizde oluşur, bu durumda ilk alan odağını kaybeder ve bu olay yürütülür.
odak ()Önceki olayın aksine, bu sadece bir öğeye odaklandığımızda gerçekleşir.
üzerine gelin ()Bu olay, fare imlecini bazı öğelerin üzerine getirdiğimizde gerçekleşir. GÜNEŞ, genellikle uygulanabilir ve çapalar .
Seçme ()Bir alan içinde bir öğe seçtiğimizde gerçekleşir SeçmeÖrneğin bir açılır listemiz var ve içeriğinden bir öğe seçiyoruz.
değişiklik ()Örneğin bir alan içinde, bir öğenin değeri veya durumu değiştiğinde gerçekleşir. Seçme, oraya yansıdığını gördüğümüz seçeneği değiştirdiğimizde.
En çok kullanılan olaylar hakkında biraz bilgimiz olduğundan, bazılarını tam sözdiziminde veya örneklerle uygulamaya koyan küçük bir belge oluşturacağız, böylece her iki formla da deney yapabiliriz.
Aşağıdaki kodda başlangıçta nasıl yazacağımızı göreceğiz. konsol.log () belge elimizdeyken hazır (), sonra fareyi bir nasıl çalıştığını onaylamak için üzerine gelmek, sonunda nasıl kullanılacağını göreceğiz Tıklayın () Y odak () Diğer mesajları görüntülemek için Yukarıdakileri açıklayan koda bakalım:

 Olay örneği 1
Fareyi bu Div'in üzerine getirin !!

Buraya bir şeyler yazın:
Bana odaklan:
$ (belge) .ready (function () {console.log ("Hazır olay gerçekleşti !!");}); $ ("# vurgulu olay"). $ ("# Click olayı"). click (function () {console.log ("bir Click olayını tetikledik") BÜYÜT
Bu, bir öğenin farklı ilişkili olaylara sahip olmasını istediğimizde olur, bu şekilde kodumuzu daha iyi düzenleyebilir ve öğemize birden fazla işlevsellik sağlayabiliriz.
İki olasılık vardır, birkaç olay için aynı eylemi yürütmek veya her biri için farklı bir eylem yürütmek, istediğimiz şekilde tam sözdizimini kullanmamız gerekecek, ilki başlangıçta tanımladığımız.
Aynı öğe için farklı eylemleri farklı olaylara nasıl bağlayacağımızı görelim. Bunun için aşağıdaki gibi bir temel sözdizimi kullanmalıyız:

 $ (seçici) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

Gördüğümüz gibi, bu sözdizimi biçimini kullanırken aşağıdaki gibi bir şey yapmaktan kaçınıyoruz:

 $ (seçici) .ShortcutEvent1 (işlev () {}); $ (seçici) .ShortcutEvent2 (işlev () {}); 

Daha organize olmamızı sağlayan şey, ancak ikisi de geçerlidir ve kendisine en uygun olanı uygulamak geliştiriciye kalmıştır.
Birden fazla olayı bir elemana nasıl bağlayacağımızı bildiğimiz için, bunu uygulamaya koyacağız, olayları seçeceğiz. Tıklayın () Y odak () Bu örnek için, o zaman onları iki elemente uygulayacağız, ilk elementte her biri için aynı cevabı üreteceğiz ve ikincisinde her olayın kendi cevabı olacak. Hedefimize ulaşmak için gerçekleştirmemiz gereken kodu görelim:

 Etkinlik örneği 2
Aynı sonuç birden fazla olay:

Etkinlik başına farklı sonuçlar:
$ ("# element1"). on ("tıkla odak", function () {console.log ("aynısını 3 olay için gösteriyoruz!");}); $ ("# element2"). on ({click: function () {console.log ("element2'ye tıkladık");}, focus: function () {console.log ("element2'ye odaklandık ");}}); 

Burada farklı olaylar için farklı tepkilerin ikinci biçimine dikkat etmemiz gerektiğini görüyoruz, çünkü olaylar birinci biçimde yaptığımız gibi tırnak içine alınmaz, ayrıca parantez içine almamız gerekir. {} yöntemin içindeki her şey .üzerinde (), bu çok sık meydana gelen bir hatadır, bu nedenle bu önlemle bundan kaçınabiliriz. Şimdi örneğimizi tarayıcımızda çalıştırdığımızda nasıl göründüğüne bakalım:

BÜYÜT
Sayacı bir ile not ediyoruz 2 numara ilk elementteki olaylar gerçekleştiğinde, bu aynı eylemi planladığımız gibi iki kez yaptığımız anlamına gelir. İkinci elemanda ise, belirlediğimiz iki eylemi konsolda yazdırdığımızı fark ediyoruz, ancak bunların yerleştirdiğimizden farklı bir sırada gerçekleştiğini de görüyoruz, bunun nedeni olayın olmasıdır. odak önce olur Tıklayın olay hiyerarşisinde, özellikle anahtarı kullanırsak SEKME alanlar arasında hareket etmek için
Bu eğitimin sonunda, aşağıdakilerle olay işleme dünyasına nasıl başlayacağımızı öğrendik. jQueryBu sadece bir ağız açıcıdır, ancak bu küçük özelliklerle uygulamalarımızda birçok şeyi başarabiliriz.

Bu eğitim size yardımcı oldu mu?
değilse

BU EĞİTİMİ GELİŞTİRMEYE YARDIMCI OLUN!
Bu öğreticiyi düzeltebileceğinizi veya geliştirebileceğinizi düşünüyor musunuz? Sürümünüzü faydalı olduğunu düşündüğünüz değişikliklerle birlikte gönderebilirsiniz.
0 kullanıcı bu öğreticiyi düzenledi. Düzenleyin ve tanınmış bir uzman olun!
Bu Eğitimi Düzenle

BENZER ÖĞRETMENLER

JQuery UI ile resimler nasıl sürüklenir ve alınırJQuery ile bir Spinner veya yükleme simgesi nasıl yapılırWeb geliştirme için JQuery eklentileri ve kitaplıklarıJQuery ve PHP ile Flexigrid dinamik ızgaraNode.js ile JSON işlemeNode.js'de olay işlemeNode.js'de arabellekleri işlemeJquery ile düzenli ifadeler
Yorum yok, ilk siz olun!
Daha fazla beklemeyin ve Solvetic'e girinYorumlarınızı bırakın ve kullanıcı hesabından yararlanın Bize katılın!

Hesap oluşturSolvetic hesabınıza sahip olmak için ÜCRETSİZ kaydolunBir hesap oluştur
Tanımlamakzaten bir hesabın var mı? Oturum açınBeni Hesabımda tanımla




Bilgi

 Yayınlanan 12 Aralık 2014 14:44
 Güncellenmiş 14 Aralık 2014 05:44
 ziyaretler 3.7K
 SeviyeProfesyonel


En Son JavaScript Eğitimleri

Windows 10'da NPM, PowerShell ile nasıl güncellenir
JQuery UI ile resimler nasıl sürüklenir ve alınır
JQuery ile bir Spinner veya yükleme simgesi nasıl yapılır
Bir web sitesinin birkaç dile çevrilmesi nasıl sağlanır?

JavaScript'in daha fazlasını görün