onclick()'in nasıl çalıştığını anlamak isteyen herkese merhaba. Bugünün makalesi, bu olay işleyicisinin çalışma prensibini bir kez ve herkes için anlamanıza ve belirli bir onclick JavaScript örneğini veya daha doğrusu örnekleri ayrıştırmanıza yardımcı olacaktır.
Size bu araçla çalışmanın birkaç yolunu göstereceğim, avantaj ve dezavantajlarının neler olduğunu açıklayacağım ve jQuery'nin olaylarla nasıl çalıştığını anlatacağım. Şimdi malzemenin analizine geçelim!
Olay işleyicileri atama
Öncelikle, sorunun teorik kısmını analiz edelim. Sayfalarındaki hemen hemen herkes komut dosyalarını işler. Ve genellikle bunlar çeşitli olaylardır. Tüm bu programlanmış olayların tetiklenmesi için, onlar için bir işleyici kurulmalıdır.
Yazma kurallarına göre, tüm işleyiciler adlarında gözlemlenen "on + olay adı" içerir. tıklamada ()... Seçilen olaya bağlı olarak, farklı eylemler sonucunda işleme gerçekleşecektir. Bizim durumumuzda, kullanırken tıklamada () yalnızca sol fare tıklamasının neden olduğu olaylar yürütülür.
Olay işleyici atamanın farklı yolları
Bugün, bazı veya bazı olayların işleyicisini koda sokmak için birkaç seçenek var.
Basit olayları kullanma
Html belgesinin tam işaretlemesine onclick () enjekte etmek olan basit bir seçenekle başlayalım. Şuna benziyor:
Gördüğünüz gibi farenin sol tuşu ile butona bastığınızda "Tıkla-tıkla!" mesajı çıkıyor. Küçük ama önemli bir ayrıntıya dikkatinizi çekmek istiyorum. İçeri Alarm sadece tek tırnak ('') kullanılabilir.
Ayrıca bu durumda, anahtar kelimeyi kullanabilirsiniz. Bugün nasılsın... Geçerli öğeye atıfta bulunur ve bunun için mevcut tüm yöntemleri sağlar.
Bu kod satırı, "Beni tıkla" metnini içeren bir düğme oluşturur. Bastıktan sonra ekranda şu mesajı göreceksiniz: “Basın!” Düğmenin ilk adının yerini alacak.
Bu yöntem inkar edilemez derecede basittir. Ancak, yalnızca benzer görevler için uygundur, ör. mesajları görüntüleme veya basit komutları yürütme.
Döngüsel yapılar kullanmak, etiket kullanmak vb. gerekiyorsa, bu yöntem uygun değildir. Kodun okunabilirliğini azaltacak, aynı zamanda hantal ve dağınık hale getirecektir.
Bu durumda, işlevlere başvurmaya değer.
Fonksiyonlarla çalışma
İşlevler, gerekli kodu daha sonra olay işleyicisi aracılığıyla çağrılabilecek ayrı bir bloğa ayırmanıza izin verir.
Örnek olarak, 1'den başlayıp 5'e kadar çıkan sayıyı çeşitli derecelerde kullanıcıya göstermek için bir uygulama ekledim. Bunun için bir fonksiyon oluşturdum sayımPow () hangi parametrelere geçilebilir. Uygulamamda, kullanıcının fonksiyon değişkeni olarak bir rakam girmesi gerekiyor.
Böylece yukarıda adı geçen fonksiyonla ilişkilendirilen işleyici aracılığıyla hesaplamalar yapıldı ve görüntülendi.
Bu yöntem genellikle geliştirme sırasında kullanılır. Bununla birlikte, en popüler değildir, çünkü olayları bu şekilde bağlamak her zaman uygun değildir. Bazen, bazı sorunları çözmek için en iyi seçenek, özelliklerini kullanarak nesnelerin olaylara esnek bir şekilde bağlanmasını sağlamaktır.
DOM öğesi özellikleri
Bilmeyenler için DOM - "Belge Nesnesi Modeli"("Belge Nesnesi Modeli"). Çeşitli değişiklikler yapmak ve öğeleri manipüle etmek için ana araçtır.
DOM hiyerarşik bir ağaç olduğundan, belirli dallar üzerinden ilerleyerek sayfa nesnelerinin belirli özelliklerine ve yöntemlerine erişilebilir.
Örnek olarak, arka plan rengini varsayılandan maviye değiştirmeye karar verdim. Bunu yapmak için zincirden geçtim belge.body.style.backgroundRenk.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
jQuery kitaplığını kullanma
Işığın serbest bırakılmasıyla birlikte, yazılı kodu büyük ölçüde basitleştiren ve kısaltan birçok ek komut, özellik ve yöntem vardı. Geliştiriciler çoğu zaman, tanımlayıcısı (document.getElementById (iden)), sınıfı (element.getElementsByClassName (className)), etiketi (elem.getElementsByTagName (tag)) veya adı (document.getElementsByName (ad) ile belirli bir öğeyi elde etmek için özellikleri kullanır. )) ...
Neyin tehlikede olduğunu anlamak için aşağıdaki örneği inceleyin.
Dikkatlice! Düğmeye tıklarsanız, bu içerikte değişiklikler olacaktır.
Gördüğünüz gibi, her şey oldukça basit çalışıyor.
Makalemi beğendiyseniz, güncellemelere abone olduğunuzdan emin olun. Önümüzde hala birçok ilginç ve bilgilendirici şey var. Yayınlarımın repostları için minnettar olurum. Güle güle!
Saygılarımla, Roman Chueshov
Okumak: 629 kez
Javascript'te onclick kadar basit bir olay, çeşitli şekillerde tetiklenebilir ve bazı incelikleri gizler. Olay, farenin sol tuşu ile bir öğeye tıkladığınızda gerçekleşir. Tıkladığınızda, fare düğmesine basmak ve bırakmak gibi iki olayın daha gerçekleştiğini belirtmekte fayda var.
Tüm örnekler "a" etiketinde (bağlantı) dikkate alınacaktır. Kafanız karışmasın, diğer etiketlerle benzer şekilde çalışacaktır.
Bir onclick olayını kapatmanın en kolay yolu, onu doğrudan html etiketine yazmaktır:
örnek 1
Eylemdeki kod:
Örnekte, bağlantıya tıkladığınızda bir açılır mesaj kutusu görüntülenir. Eyleme ek olarak "return false;" ekledik. Bu, "onclick" olayı tetiklendikten sonra bağlantının takip edilmesini önlemek için gereklidir. Diğer öğelerde ( href özelliğinin olmadığı durumlarda), bu atlanabilir.
Olay küçük kod içeriyorsa, dikkate alınan seçenek kullanılabilir. Aksi takdirde diğer yöntemlere dikkat etmelisiniz.
onclick olay kodunu bir javascript işlevine taşıma
Bir sonraki iyi şey, javascript kodunu html etiketlerinden ayırmamızdır. Etikete fonksiyonun adını yazarız ve fonksiyonun kendisini ayrı bir bloğa koyarız:
Rengi değiştir
Eylemdeki kod:
Ama burada da her şey mükemmel değil. Ya etkinliğin sitenin tüm bağlantılarına asılması gerekiyorsa ve bunlardan yüzlercesi varsa? Zor görünüyor, ancak gerçekte on satırdan daha az kod var. Sorun seçiciler kullanılarak çözülür. Örnekte yine “a” etiketi ile işlemler yapacağız fakat link yerine “img” veya “div” kullanmamıza hiçbir engel yok.
Javascript kodundan bir öğeye tıklıyoruz
Bence en pratik ve güvenilir olan bir yol daha düşünelim. İyidir çünkü olay birçok unsura asılabilir. Bunu yapmak için, onclick olayını uygulamak istediğiniz öğeleri seçmek için javascript seçicileri kullanmanız gerekir.
Açık
Eylemdeki kod:
Elemanların seçiciler tarafından seçilmesine ayrı bir konu ayırabilirsiniz, sadece yeni HTML5 spesifikasyonuna göre javascript'te de seçimlerinin kolaylaştığını söyleyebilirim. jquery veya CSS'ye aşina iseniz, gerekli öğeleri seçmeniz zor olmayacaktır. Örneğin, "link" sınıfına sahip tüm öğeleri seçmek ve bunlara istenen eylemi eklemek çok kolaydır:
// gerekli elemanları seçin var a = document.querySelectorAll (". link"); // bulunan tüm öğeleri yineleyin ve olayları üzerlerine asın .forEach.call (a, function (el) (// olayları asın el.click = function (e) (// eylemleri gerçekleştir)));
jQuery'yi kullanma
Proje jQuery kitaplığını kullanıyorsa, kodu daha da basitleştirebilirsiniz. En yaygın iki yola bakalım:
$ (işlev () ($ (". bağlantı").tıklayın (işlev () (// eylemler));));
Ve öncekiyle aynı olan bir seçenek daha.
$ (işlev () ($ (". bağlantı"). on ("tıkla", işlev () (// eylemler));));
Çok sayıda yararlı işlevsellik taşıdığı için "on ()" işleyicisini ayrıca tanımak daha iyidir. Örneğin, eylemin uygulanacağı bir boşlukla ayrılmış birkaç olay belirtme, olayları alt öğelere devretme ve başlangıçta sayfada olmayan dinamik olarak eklenen öğelere bir olay asmanız gerektiğinde de yararlıdır. .
Bazı JavaScript olay programları, doğrudan kullanıcı girişiyle çalışır. Oluşma anı ve bu tür etkileşimlerin sırası önceden tahmin edilemez.
Etkinlik sahipleri
Bir tuşa basıldığında, tekrar bırakılmadan önce tuşa basıldığı anı yakalamak için durumunu sürekli okuyarak yanıt verebilirsiniz.
İlkel makinelerde veri girişi bu şekilde işlenirdi. Daha ilerici, bir tuş vuruşunun algılanması ve kuyruğa alınmasıdır. Program daha sonra yeni olaylar için kuyruğu düzenli olarak kontrol edebilir ve orada bulduklarına tepki verebilir. Bu durumda program kuyruğa bakmayı unutmamalı ve bunu sık sık yapmalıdır.
Bir tuşa basılmasından programın bu olayı algılamasına kadar geçen sürede, aslında isteklere yanıt vermez. Bu yaklaşıma anket denir.
Çoğu programcı mümkünse bundan kaçınmaya çalışır.
En iyi yol, kodunuzun olaylara olduğu gibi tepki vermesini sağlayan bir sistem uygulamaktır. Tarayıcılar, belirli JavaScript olayları için işleyici işlevlerini kaydetme olanağı sağlayarak bunu uygular:
İşleyiciyi etkinleştirmek için bu belgeye tıklayın.
addEventListener işlevi, birinci argüman tarafından açıklanan olay meydana geldiğinde ikinci argümanının çağrılması için kaydedilir.
Olaylar ve DOM Düğümleri
Her tarayıcı olay işleyicisi bir bağlamla kaydedilir. addEventListener işlevini çağırdığınızda, tarayıcıda global aralık pencere nesnesine eşdeğer olduğundan, tüm pencere için bir yöntem olarak çağrılır. Her DOM öğesinin, bu belirli öğedeki olayları izlemenizi sağlayan kendi addEventListener yöntemi vardır:
Burada bir işleyici yok.
Bu örnekte, işleyici düğme düğümüne bağlıdır. JavaScript'in fare olayları, işleyiciyi harekete geçirir, ancak belgenin geri kalanına tıklandığında olmaz.
Düğümde onclick niteliğini ayarlayarak aynı sonucu elde ederiz. Ancak bir düğümün yalnızca bir onclick özniteliği vardır, bu nedenle her düğüm için yalnızca bir işleyici kaydedebilirsiniz. addEventListener yöntemi, istediğiniz sayıda işleyici eklemenize olanak tanır. Bu nedenle, zaten kayıtlı olan bir işlemcinin yanlışlıkla değiştirilmesine karşı sigortalıyız.
removeEventListener yöntemi, addEventListener ile aynı bağımsız değişkenlerle çağrılır. İşleyiciyi kaldırır:
Bir işleyici işlevini iptal etmek için ona bir ad veririz (örneğin, bir Zamanlar). Hem addEventListener'a hem de removeEventListener'a bu şekilde iletiyoruz.
Olay Nesneleri
Yukarıdaki örneklerde bundan bahsetmemiş olsak da, JavaScript olay işleyici işlevine bir argüman iletilir: olay nesnesi. Etkinlik hakkında ek bilgi sağlar. Örneğin, hangi fare düğmesine basıldığını bilmek istiyorsak, hangi olay nesnesinin özelliğinin değerini almamız gerekir:
Nesnede saklanan bilgiler, olayın türüne göre farklılık gösterir. Nesnenin type özelliği her zaman olayı tanımlayan bir dize içerir (örneğin, “ Tıklayın" veya " fare aşağı«).
Yayma
Etkinlik sahipleri ( ör. JavaScript dokunma olayları) üst düğümler için kayıtlı olanlar, çocuklar üzerinde meydana gelen olayları da alır. Bir paragrafın içindeki bir düğmeye tıklandığında, paragraf olay işleyicileri de bir tıklama olayı alır.
Olay, meydana geldiği düğümden üst düğüme ve belgenin köküne yayılır. Belirli bir düğümde kayıtlı tüm işleyiciler sırayla etkinleştikten sonra, tüm pencere için kayıtlı işleyicilere olaya yanıt verme fırsatı verilir.
Herhangi bir zamanda, bir olay işleyici, olayın daha fazla yayılmasını önlemek için olay nesnesinde stopPropagation yöntemini çağırabilir. Bu, başka bir etkileşimli öğenin içinde bir düğmeniz olduğunda ve düğme tıklandığında dış öğelere tıklamak için ayarlanan davranışın etkinleştirilmesini istemiyorsanız yararlı olabilir.
Aşağıdaki örnekte, işleyicileri kaydediyoruz " FareAşağı»Hem buton hem de paragraf için. Sağ tıkladığınızda ( JavaScript fare olayları) işleyici, paragraf işleyicisinin başlamasını engelleyen stopPropagation yöntemini çağırır. Düğmeye başka bir fare düğmesiyle basıldığında, her iki işleyici de başlatılır:
Paragraf ve içinde .
Çoğu olay nesnesinin, içinde meydana geldikleri düğüme işaret eden bir hedef özelliği vardır. Bu özelliği, düğümden yukarı doğru yayılan bazı olayları yanlışlıkla işlemekten kaçınmak için kullanabilirsiniz.
Belirli bir türdeki bir olayın aralığını genişletmek için bir JavaScript olay hedefi de kullanabilirsiniz. Örneğin, uzun bir düğme listesi içeren bir düğümünüz varsa, tüm düğmeler için işleyici örneklerini kaydetmek yerine, harici düğüm için bir tıklama işleyicisi kaydetmek ve düğmenin tıklanıp tıklanmadığını izlemek için target özelliğini kullanmak daha uygundur:
Varsayılan eylemler
Birçok olayın kendileriyle ilişkili varsayılan eylemleri vardır. Bağlantıya tıklarsanız, bağlantının hedef öğesine yönlendirilirsiniz. Aşağı oku tıklarsanız, tarayıcı sayfayı aşağı kaydırır. Sağ tıklarsanız, bir bağlam menüsü açılır.
Çoğu olay türü için, varsayılan eylemler gerçekleştirilmeden önce JavaScript olay işleyicileri çağrılır. Varsayılan davranışın çalışmasını istemiyorsanız, olay nesnesi üzerinde önlemeVarsayılan yöntemini çağırmalısınız.
Özel klavye kısayollarını veya bağlam menülerini uygulamak için kullanın. Veya kullanıcıların beklediği davranışı geçersiz kılmak için. Aşağıda takip edilemeyen bir bağlantı var:
MDN
Bunu yapmak için zorlayıcı bir nedeniniz olmadıkça bunu yapmamaya çalışın.
Tarayıcıya bağlı olarak, bazı olaylara müdahale edilemeyebilir. Örneğin Google Chrome'da klavye kısayolu ( olay anahtar kodu JavaScript) geçerli sekmeyi kapatmak için ( Ctrl-W veya Komut-W) JavaScript tarafından işlenemez.
Önemli olaylar
Kullanıcı klavyede bir tuşa bastığında tarayıcı " tuşa basmak". Anahtarı bıraktığında, olay “ anahtarlama«:
V tuşuna bastığınızda bu sayfa mor renge döner.
Ayrıca, bu olay, kullanıcı bir tuşa basıp basılı tuttuğunda veya tuş basılı tutulduğunda tetiklenir. Örneğin oyundaki karakterin hızını bir ok tuşuna basarak artırmak ve tuşu bırakarak tekrar azaltmak istiyorsanız, tuşa her basıldığında hızı artırmamaya dikkat etmeniz gerekiyor.
Önceki örnek, olay nesnesinin JavaScript anahtar kodu özelliğini kullanmıştı. Hangi tuşa basıldığını veya bırakıldığını belirler. Sayısal anahtar kodunun gerçek anahtara nasıl dönüştürüleceği her zaman açık değildir.
Unicode karakter kodu, harf ve sayı tuşlarının değerlerini okumak için kullanılır. Harf ile ilişkilidir ( büyük harf) veya tuşta belirtilen numara. Dizeler için charCodeAt yöntemi, bu değeri elde etmenizi sağlar:
konsol.log ("Violet" .charCodeAt (0)); // → 86 console.log ("1" .charCodeAt (0)); // → 49
Diğer anahtarlar, kendileriyle ilişkili daha az tahmin edilebilir anahtar kodlarına sahiptir. Doğru kodu bulmanın en iyi yolu denemektir. Aldığı tuş kodlarını yakalayan bir tuşa basma olay işleyicisini kaydedin ve istediğiniz tuşa basın.
Shift, Ctrl, Alt gibi tuşlar, normal tuşlar gibi olayları yükseltir. Ancak tuş kombinasyonlarını izlerken, bu tuşlara klavye ve JavaScript fare olayları özellikleri tarafından basılıp basılmadığını da anlayabilirsiniz: shiftKey, ctrlKey, altKey ve metaKey:
Devam etmek için Ctrl-Space tuşlarına basın.
Gelişmeler " tuşa basmak" ve " anahtarlama»Gerçek tuş vuruşları hakkında bilgi sağlayın. Peki ya asıl metnin girilmesini istiyorsak? Anahtar kodlardan metin almak elverişsizdir. Bunun için bir olay var" tuşa basma"Hangisi hemen sonra tetiklenir" tuşa basmak". Tuşa basıldığında "keydown" ile tekrarlanır. Ancak yalnızca karakter girdiğiniz tuşlar için.
Olay nesnesindeki charCode özelliği, bir Unicode karakter kodu olarak yorumlanabilen kod içerir. Bu kodu tek karakterli bir dizgeye dönüştürmek için String.fromCharCode işlevini kullanabiliriz.
Odağı bu sayfaya ayarlayın ve bir şeyler yazın.
Olayın gerçekleştiği DOM düğümü, tuşa basıldığında odakta olan öğeye bağlıdır. Normal düğümlerin giriş odağı olamaz ( onlar için tabindex niteliğini ayarlamadığınız sürece), ancak bağlantılar, düğmeler ve form alanları gibi öğeler olabilir.
Belirli bir öğeye odaklanılmamışsa, o zaman document.body, önemli olaylar ve JavaScript dokunma olayları için hedef düğümdür.
Fare tıklamaları
Fare düğmesine basmak da bir dizi olayı tetikler. Gelişmeler " fare aşağı" ve " fare yukarı"Benzer" tuşa basmak" ve " anahtarlama". Fare düğmesine basıldığında ve bırakıldığında çalışırlar. Bu olaylar, olay başlatıldığında üzerine gelinen DOM düğümlerinde tetiklenir.
Olaydan sonra fare düğmesinin hem basılması hem de bırakılmasının ait olduğu ortak bir düğüm için " fare yukarı"Olay" Tıklayın". Örneğin, bir öğe üzerinde fare düğmesine basarsanız ve ardından imleci başka bir öğeye hareket ettirir ve düğmeyi bırakırsanız, olay “ Tıklayın"Bu öğelerin her ikisini de içeren bir öğede gerçekleşecek.
Birbirine yakın iki tıklama meydana gelirse, “ dblclick"(Çift tıklama). İkinci tıklamadan sonra görünür. Fare olayının gerçekleştiği konum hakkında doğru bilgi almak için, belgenin sol üst köşesine göre olayın koordinatlarını (piksel olarak) içeren pageX ve pageY özelliklerinin değerini almanız gerekir.
Aşağıda ilkel bir çizim programının uygulanması yer almaktadır. Belgede fareye her tıklandığında (imlecin altında), bir nokta eklenir:
clientX ve clientY özellikleri pageX ve pageY'ye benzer, ancak bunlar belgenin görünen kısmına atıfta bulunur. Farenin koordinatlarını getBoundingClientRect işlevi tarafından döndürülen koordinatlarla karşılaştırmak için kullanılabilirler.
fare hareketi
Fare imleci her hareket ettiğinde, olay " fare hareketi»JavaScript fare olay kümesinden. Farenin konumunu izlemek için kullanılabilir. Bu, fare ile sürükle ve bırak özelliğini uygularken kullanılır.
Aşağıdaki örnekte, program bir paneli görüntüler ve siz sürükledikçe panelin daralması veya genişlemesi için olay işleyicilerini ayarlar:
Genişliğini değiştirmek için panelin kenarını sürükleyin:
İşleyicinin " fare hareketi»Bütün pencere için kayıtlıdır. Yeniden boyutlandırma sırasında fare bölmenin dışına çıksa bile, fare düğmesi bırakıldığında bölme genişliğini günceller ve JavaScript dokunma olaylarını durdururuz.
Kullanıcı fare düğmesini bıraktığında paneli yeniden boyutlandırmayı durdurmamız gerekiyor. Ne yazık ki, tüm tarayıcılar " fare hareketi"Mülk olan. Benzer bilgiler sağlayan standart bir özellik düğmeleri vardır, ancak tüm tarayıcılarda da desteklenmez. Neyse ki, tüm büyük tarayıcılar bir şeyi destekler: düğmeler veya hangi. Yukarıdaki örnekteki buttonPressed işlevi ilk olarak button özelliğini kullanmayı dener, yoksa hangisine gider.
Fare imleci bir düğümün üzerine geldiğinde veya bir düğümden ayrıldığında, olaylar " fareyle üzerine gelmek" veya " fare çıkışı". Fareyle üzerine gelme efektleri oluşturmak, bazı imzaları görüntülemek veya bir öğenin stilini değiştirmek için kullanılabilirler.
Böyle bir etki yaratmak için sadece olay gerçekleştiğinde onu göstermeye başlamak yeterli değildir. fareyle üzerine gelmek"Ve olaydan sonra bitiyor" fare çıkışı". Fare bir düğümden çocuklarından birine geçtiğinde, " fare çıkışı". Fare işaretçisi düğümün yayılma aralığından ayrılmamış olsa da.
Daha da kötüsü, bu JavaScript olayları diğer olaylarla aynı şekilde yayılır. Fare, bir işleyicinin kayıtlı olduğu alt düğümlerden birinden ayrıldığında, olay “ fare çıkışı«.
Bu soruna geçici bir çözüm bulmak için olay nesnesinin RelatedTarget özelliğini kullanabilirsiniz. Bir olay durumunda " fareyle üzerine gelmek"Daha önce hangi öğenin üzerine gelindiğini gösterir. Ve meydana gelmesi durumunda " fare çıkışı"- işaretçinin hangi öğeye taşındığı. Fareyle üzerine gelme efektini yalnızca ilgiliTarget hedef düğümümüzün dışında olduğunda değiştireceğiz.
Bu durumda, fare imleci düğümün dışından düğümün üzerine geldiği için davranışı değiştiririz (veya tam tersi):
Farenizi bunun üzerine getirin paragraf.
isInside işlevi, belirli bir düğümün üst bağlantılarını veya belgenin en üstüne ulaşılana kadar (ne zaman düğüm sıfır). Veya ihtiyacımız olan ana öğe bulunmayacaktır.
Aşağıdaki örnekte gösterildiği gibi, vurgulu efekti CSS: hover sözde seçiciyi kullanarak oluşturmak çok daha kolaydır. Ancak fareyle üzerine gelme efekti, yalnızca hedef düğümün stilini değiştirmekten daha karmaşık bir şey önerdiğinde, " fareyle üzerine gelmek" ve " fare çıkışı» ( JavaScript fare olayları):
Kaydırma etkinlikleri
Bir öğe kaydırıldığında, üzerinde bir JavaScript kaydırma olayı başlatılır. Kullanıcının o anda ne görüntülediğini takip etmek için kullanılabilir; görünümün dışındaki animasyonu devre dışı bırakmak için.
Aşağıdaki örnekte, belgenin sağ üst köşesinde bir ilerleme göstergesi görüntülüyoruz ve sayfayı aşağı kaydırdıkça kademeli olarak farklı bir renkle dolacak şekilde güncelliyoruz:
Beni kaydır...
Eleman üzerinde pozisyonu veya sabit özelliği ayarlayarak, pozisyon: mutlak ayarıyla aynı sonucu elde ederiz. Ancak bu, öğenin belgenin geri kalanıyla birlikte kaydırılmasını da engeller. Sonuç olarak, ilerleme göstergesi üst köşede statik olarak sabitlenecektir. İçinde, mevcut ilerlemeye göre yeniden boyutlandırılan başka bir öğe var.
Genişliği ayarlarken, öğenin boyutunun ilerleme çubuğunun boyutuyla orantılı olarak yeniden boyutlandırılması için px değil, ölçüm birimi olarak % kullanırız.
Genel değişken innerHeight, belgenin mevcut kaydırılabilir toplam yüksekliğinden çıkarmamız gereken pencerenin yüksekliğini içerir. Belgenin en altına ulaştığınızda pencereyi aşağı kaydıramazsınız. InnerWidth, innerHeight ile de kullanılabilir. pageYOffset'i bölerek ( kaydırma kutusunun mevcut konumu) izin verilen maksimum kaydırma konumuyla ve 100 ile çarparak ilerleme çubuğu için yüzdeyi alırız.
JavaScript kaydırma olayında önlemeDefault'u çağırmak, kaydırmayı engellemez. Olay işleyicisi yalnızca kaydırma gerçekleştikten sonra çağrılır.
Odak olayları
Bir öğe giriş odağına sahip olduğunda, tarayıcı " odak". Giriş odağı kaldırıldığında, olay " bulanıklık«.
Bu iki olayın yayılımı yoktur. Çocuğun odağı olduğunda ebeveyn işleyicisi bilgilendirilmez.
Aşağıdaki örnek, o anda giriş odağına sahip olan metin alanı için bir araç ipucu görüntüler:
İsim:
Yaş:
pencere nesnesi olayları alır " odak" ve " bulanıklık“Kullanıcı bir sekmeye gittiğinde veya sekmeden ayrıldığında, belgenin görüntülendiği tarayıcı penceresi.
Olayı yükle
Sayfanın yüklenmesi tamamlandığında, belge gövdesi ve pencere nesneleri için JavaScript olayı "load" başlatılır. Tüm belgenin yüklenmesini gerektiren eylemlerin başlatılmasını programlamak için kullanılır. içerik olduğunu unutmayın
Bazen planladığımız bir özelliği iptal etmek gerekiyor. Bu, setTimeout işlevinin dönüş değerini depolayarak ve üzerinde clearTimeout'u çağırarak yapılır:
var bombTimer = setTimeout (işlev () (console.log ("BOOM!");), 500); if (Math.rastgele ()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
CancellAnimationFrame işlevi, clearTimeout ile aynı şekilde çalışır. Çerçeveyi iptal etmek için requestAnimationFrame tarafından döndürülen değer tarafından çağrılır ( henüz çağrılmadıysa).
Benzer bir dizi işlev, setInterval ve clearInterval, her X milisaniyede bir eylemi tekrarlaması gereken bir zamanlayıcı ayarlamak için kullanılır:
var keneler = 0; var clock = setInterval (function () (console.log ("tick", ticks ++); if (tikler == 10) (clearInterval (clock); console.log ("stop.");)), 200) ;
Bölmek
Bazı olay türleri kısa bir süre içinde birçok kez tetiklenebilir ( örneğin "mousemove" ve javascript kaydırma olayı). Bu tür olayları işlerken, bunun çok uzun sürmemesine dikkat etmelisiniz, aksi takdirde işleyici eylemi o kadar uzun süre gerçekleştirecek ki, belge ile etkileşim yavaşlayacak ve spazmodik hale gelecektir.
Böyle bir işleyicide standart olmayan bir şey yapmanız gerekiyorsa, çok uzun sürmediğinden emin olmak için setTimeout'u kullanabilirsiniz. Bu genellikle olayı ezmek olarak adlandırılır. Kırma için birkaç farklı yaklaşım vardır.
İlk örnekte, kullanıcı yazarken bir şeyler yapmak istiyoruz. Ancak bunu her tuşa basma olayından sonra yapmak istemiyoruz. Kullanıcı hızlı yazarken, bir duraklama olana kadar beklemeniz gerekir. Olay işleyicisinde eylemi hemen yürütmek yerine bir gecikme belirledik. Ayrıca önceki gecikmeyi de gideririz ( varsa). Olaylar kısa aralıklarla meydana gelirse ( bizim tarafımızdan belirlenen gecikmeden daha az), daha sonra önceki olaydan gelen gecikme iptal edilir:
clearTimeout öğesine tanımsız bir değer iletmek veya halihazırda devam etmekte olan bir gecikme için onu çağırmak hiçbir etkiye sahip olmayacaktır. Artık ne zaman çağıracağımıza dikkat etmemize gerek yok, sadece her olay için yapıyoruz.
Yanıtları kısa bir süreye bölmeniz gerekiyorsa farklı bir senaryo kullanabilirsiniz. Ancak aynı zamanda bir dizi etkinlik sırasında başlatılırlar ve hemen ardından değil. Örneğin, olaylara yanıt olarak gönderebilirsiniz " fare hareketi» ( JavaScript fare olayları) farenin geçerli koordinatları, ancak yalnızca her 250 milisaniyede bir:
Çözüm
Olay işleyicileri, üzerinde doğrudan kontrolümüz olmayan olayları algılamamıza ve bunlara yanıt vermemize olanak tanır. addEventListener yöntemi, böyle bir işleyiciyi kaydetmek için kullanılır.
Her olay belirli bir türe aittir (" tuşa basmak«, « odak"Ve benzeri) onu tanımlar. Çoğu olay, belirli bir DOM öğesi için tetiklenir ve ardından öğenin üst düğümlerine yayılır. Bu, bu öğelerle ilişkili işleyicilerin bunları işlemesine olanak tanır.
Bir işleyici çağrıldığında, ona eylem hakkında ek bilgiler içeren bir olay nesnesi iletilir. Bu nesne ayrıca olayın daha fazla yayılmasını durdurmak için yöntemler içerir ( yayılımı durdur) veya varsayılan tarayıcının olayı işlemesini önleyin ( önlemekVarsayılan).
Tuşlara basmak olayları yükseltir " tuşa basmak«, « tuşa basma" ve " anahtarlama". Fareye tıklamak olayları yükseltir " fare aşağı«, « fare yukarı" ve " Tıklayın". Fareyi hareket ettirmek -" fare hareketi«, « fare" ve " fare çıkışı«.
JavaScript kaydırma olayı “ kullanılarak tanımlanabilir. taslak", Ve odak değişikliği" odak" ve " bulanıklık". Belgenin pencereye yüklenmesi tamamlandıktan sonra, “ yük«.
Bir JavaScript programının yalnızca bir bölümü aynı anda çalışabilir. Olay işleyicileri ve diğer zamanlanmış komut dosyaları, kuyruktaki diğer komut dosyalarının yürütülmesini tamamlamasını beklemelidir.
Sitenizde sevgili kediniz Murzik'in bir fotoğrafı varsa, ancak birisinin onu kopyalamasını veya sabit diske kaydetmesini istemiyorsanız, sitenin gövdesine böyle bir komut dosyası koyun.
Olay işleme
JavaScript istemci programları, program yürütmenin olaya dayalı olduğu bir programlama modelini temel alır. Bu programlama stiliyle, web tarayıcısı, belgeye veya bazı öğelerine bir şey olduğunda bir olay oluşturur. Örneğin, bir web tarayıcısı, kullanıcı bir köprünün üzerine geldiğinde veya klavyede bir tuşa bastığında bir belgeyi yüklemeyi bitirdiğinde bir olay oluşturur.
Bir JavaScript uygulaması, belirli bir belge öğesi için belirli bir olay türüyle ilgileniyorsa, bu olay gerçekleştiğinde çağrılacak bir veya daha fazla işlevi kaydedebilir. Bunun web programlamaya özgü olmadığını unutmayın: tüm GUI uygulamaları bu şekilde hareket eder - sürekli olarak bir şeyin olmasını beklerler (yani olayların olmasını beklerler) ve olanlara yanıt verirler.
Etkinlik tipi olayı tetikleyen eylemin türünü tanımlayan bir dizedir. Örneğin "mousemove" türü, kullanıcının fare işaretçisini hareket ettirdiği anlamına gelir. "Keydown" türü, klavyede bir tuşa basıldığı anlamına gelir. Ve "yükleme" türü, belgenin (veya başka bir kaynağın) ağdan yüklenmesinin bittiği anlamına gelir. Olay türü yalnızca bir dize olduğundan, bazen olay adı olarak anılır.
Etkinliğin amacı olayın meydana geldiği veya olayın ilişkilendirildiği nesnedir. İnsanlar bir olay hakkında konuştuklarında genellikle olayın türü ve amacından bahsederler. Örneğin, bir Window nesnesinin "load" olayı veya bir elemanın "click" olayı
Olay işleyicisi bir olayı işleyen veya yanıtlayan bir işlevdir. Uygulamalar, olay türünü ve hedefini belirterek olay işleyici işlevlerini web tarayıcısına kaydetmelidir. Belirtilen hedefte belirtilen türde bir olay meydana geldiğinde, tarayıcı işleyiciyi çağırır. Olay işleyicileri bir nesne için çağrıldığında, bazen tarayıcının olayı "yükselttiğini" veya "kaldırdığını" söyleriz.
Olay nesnesi belirli bir olayla ilişkili ve o olay hakkında bilgi içeren bir nesnedir. Olay nesneleri, olay işleyici işlevine bir argüman olarak iletilir (olay nesnesinin yalnızca bir global değişken olayı olarak mevcut olduğu IE8 ve önceki sürümler dışında). Tüm olay nesnelerinin özelliği vardır tip olayın türünü ve özelliğini tanımlama hedef bu olayın amacını tanımlar.
Her olay türü için, ilişkili olay nesnesinde bir dizi özellik tanımlanır. Örneğin, fare olaylarıyla ilişkili bir nesne, fare işaretçisinin koordinatlarını içerir ve klavye olaylarıyla ilişkili bir nesne, basılan tuş ve basılan değiştirici tuşlar hakkında bilgi içerir. Birçok olay türü için yalnızca tür ve hedef gibi standart özellikler tanımlanır ve hiçbir ek yararlı bilgi iletilmez. Bu tür olaylar için, bir olay oluşumunun varlığı önemlidir ve başka hiçbir bilgi alakalı değildir.
Olayın yayılması tarayıcının hangi nesnelerin olay işleyicilerini çağıracağına karar verme sürecidir. Tek bir nesneyi hedefleyen olaylar için (bir Window nesnesinin "load" olayı gibi), yayılmaları gerekmez. Ancak, bir belge öğesinde bir olay meydana geldiğinde, belge ağacında yayılır veya "kayar".
Taramalı Atomik Kuvvet Mikroskobu Laboratuvar raporu şunları içermelidir:
Havai iletişim ağı için destek seçimi
AC katener tasarımı ve hesaplanması
Mikroişlemci sistemlerinin geliştirilmesi Mikroişlemci sistemlerinin tasarım aşamaları
mcs51 ailesinin mikrodenetleyicileri