Birçok web uygulaması, işlevlerini yerine getirmek için bir tür vakaya güvenir. Bir noktada, bir insan arayüzüyle etkileşime girer ve bu da bir vaka oluşturur. Bu insan odaklı vakalar çoğu zaman fare yada klavye şeklinde çevre birimi aygıtını kullanır.
Bir aygıt bir vaka oluşturduğunda, program belirli bir davranışın ne vakit gerçekleştirilyeceğini bilmek için onu dinleyebilir. Bu öğreticide, JavaScript kullanarak etkinlikleri iyi mi dinleyeceğinizi öğreneceksiniz.
Vaka Odaklı Programlama Nedir?
Vaka odaklı programlama, işlevlerini gerçekleştirmek için bir olayın yürütülmesine dayanan bir paradigmanın adıdır. Herhangi bir üst düzey programlama dilinde vaka odaklı bir program oluşturmak mümkündür. Sadece vaka odaklı programlama en fazlaca JavaScript şeklinde kullanıcı arabirimiyle bütünleşen dillerde yaygındır.
Vaka Dinleyicisi Nedir?
Vaka dinleyicisi, belirli bir vaka oluşursa öncesinden tanımlanmış bir işlem başlatan bir işlevdir. Bu yüzden, bir vaka dinleyicisi bir fiil için “dinler”, sonrasında ilgili bir görevi gerçekleştiren bir işlevi çağırır. Bu vaka birçok formdan birini alabilir. Yaygın örnekler fare vakalarını, klavye vakalarını ve pencere vakalarını ihtiva eder.
JavaScript Kullanarak Vaka Dinleyicisi Oluşturma
DOM’daki herhangi bir öğedeki vakaları dinleyebilirsiniz. addEventListener() işlevine bakın ve web sayfasındaki herhangi bir öğeyi çağırabilirsiniz. Bu, bir sonraki addEventListener() işlevi, EventTarget arayüz. Vakaları destekleyen tüm nesneler bu arabirimi uygular. Bu, sayfadaki pencereyi, belgeyi ve tek tek öğeleri ihtiva eder.
addEventListener() işlevi aşağıdaki temel yapıya haizdir:
element.addEventListener("event", functionToExecute);Nerede:
- unsur herhangi bir HTML etiketini temsil edebilir (düğmeden paragrafa)
- “vaka” belirli, tanınan bir eylemi adlandıryan bir dizedir
- functionToExecute varolan bir işleve başvurudur
Birkaç HTML öğesi olan aşağıdaki web sayfasını oluşturalım:
Belge
Sefalar getirdin
Merhaba, web siteme hoş geldiniz.
Kullanıcı Detayları
Yukarıdaki HTML kodu, javascript dosyasına bağlanan kolay bir sayfa oluşturur. uygulama.js. Bu, bir sonraki uygulama.js dosya vaka dinleyicilerini ayarlamak için kodu ihtiva eder. Bu yüzden, bir kullanıcı web sayfasındaki ilk düğmeyi her tıklatıldığında belirli bir işlemi başlatmak istiyorsanız, bu dosyayı oluşturmak için dosyadır.
Uygulama.js Dosyası
document.querySelector('.btn').addEventListener("click", clickDemo)
function clickDemo(){
console.log("Hi there")
}Yukarıdaki JavaScript kodu, sayfadaki ilk düğmeye querySelector() fonksiyon. Hemen sonra bu öğeye bir vaka dinleyicisi ekler. addEventListener() yöntem. Dinlediği belirli olayın adı “tıkla”dır. Düğme bu vakası ateşlediğinde, dinleyici Demo() öğesini tıklatın fonksiyon.
Bu, bir sonraki Demo() öğesini tıklatın işlevi tarayıcı konsoluna “Merhaba” yazdırır. Düğmeyi her tıklatmanızda, konsolunuzda bu çıktıyı görmeniz gerekir.
“Tıklama” Vaka Çıktısı
Fare Vakaları Nedir?
JavaScript’te MouseEvent kullanıcının faresiyle etkileşimi sebebiyle oluşan vakaları temsil eden arabirim. Çeşitli vakalar, MouseEvent arayüz. Bu vakalar aşağıdakileri ihtiva eder:
- tık
- dblclick
- faremove
- fare geçiş
- fare kapanı
- fare toplama
- fare indirme
Bu, bir sonraki tık vaka, bir kullanıcı işaretçisi bir öğenin üzerindeyken bir fare düğmesine basıp özgür bırakıldığında oluşur. Önceki örnekte tam olarak bu oldu. Yukarıdaki listeden de görebileceğiniz şeklinde, fare vakaları birçok biçim alabilir.
Başka bir yaygın fare vakası dblclick, çift tıklama anlamına gelir. Bu, bir kullanıcı fare düğmesini süratli bir halde art arda iki kez tıklatdığında ateşlenir. Hakkında dikkat çekici bir şey addEventListener() işlevi, tek bir öğeye birden fazlaca vaka dinleyicisi atamak için kullanabilirsiniz.
İlk Düğmeye dblclick Vakası Ekleme
document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
alert("This is a demonstration of how to create a double-click event")
}Yukarıdaki kodu uygulamaya .js dosyaya eklemek.js web sayfasındaki ilk düğme için etkili bir halde ikinci bir vaka dinleyicisi oluşturur. Bu yüzden, ilk düğmeyi iki kez tıklatma tarayıcıda aşağıdaki uyarıyı oluşturur:
Yukarıdaki resimde oluşturulan uyarıyı görmüş olacaksınız ve konsolda iki “Merhaba” çıkışının daha bulunduğunu görmüş olacaksınız. Bunun sebebi, çift tıklatı vakasının iki tıklama vakasının birleşimi olması ve her iki vaka için de tık ve dblclick Vaka.
Listedeki öteki fare olaylarının adları davranışlarını açıklar. Bu, bir sonraki faremove vaka, imleç bir öğenin üstünde olduğunda bir kullanıcı faresini her hareket ettirdiğinde oluşur. Bu, bir sonraki fare toplama vaka, bir kullanıcı bir öğenin üstündeki düğmeyi basılı tuttuğunda ve sonrasında özgür bıraktığında oluşur.
Klavye Etkinlikleri Nedir?
JavaScript’te KlavyeEvent arayüz. Bu, bir kullanıcı ve klavyesi arasındaki etkileşimleri dinler. Geçmişte, KlavyeEvent üç vaka türü vardı. Sadece, JavaScript o zamandan beri Keypress vaka.
Kısaca, anahtarlık ve keydown vakalar, ihtiyacınız olan tek şey olan tavsiye edilen iki klavye vakasıdır. Bu, bir sonraki keydown vakası, kullanıcı bir tuşa bastığında oluşur ve anahtarlık vakası, bir kullanıcı özgür bırakıldığında oluşur.
Yukarıdaki HTML örneğini tekrardan ziyaret ederek, klavye vakası dinleyicisi eklemek için en iyi yer girdi unsur.
Uygulamanın dosyasına Klavye Vakası Dinleyicisi ekleme.js Dosyası
let greetings = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput(e){
greetings.innerText = (`Hello ${e.target.value}, welcome to my website.`)
}Yukarıdaki kod, querySelector() paragrafa erişmek için işlev ve girdi öğeleri sayfaya yer. Hemen sonra çağırır. addEventListener() yöntemi üstünde girdi öğesini dinleyen öğeyi anahtarlık vaka. Ne vakit bir anahtarlık vaka oluşur, captureInput() işlevi anahtar kıymetini alır ve sayfadaki paragrafa ekler. Bu, bir sonraki e parametresi, JavaScript’in otomatikman atadığı vakası temsil eder. Bu vaka nesnesinin, kullanıcının etkileşimde bulunmuş olduğu öğeye müracaat olan bir özelliği vardır.
Bu örnekte, girdi alan kullanıcı adı ister. Adınızı girdi web sayfası şöyleki görünür:
Paragraf şimdi yukarıdaki örnekte “Jane Doe” olan giriş kıymetini ihtiva eder.
addEventListener Her Türlü Kullanıcı Etkileşimini Yakalar
Bu yazı sizi addEventListener() yöntemin yanı sıra onunla kullanabileceğiniz birkaç fare ve klavye vakası. Bu aşamada, belirli bir vakası iyi mi dinleyeceğinizi ve buna cevap veren bir işlevin iyi mi oluşturulacağınızı bilirsiniz.
Bu, bir sonraki addEventListener sadece üçüncü parametresi vesilesiyle fazladan kabiliyet sağlar. Vaka yayılmasını denetlemek için kullanabilirsiniz: olayların öğelerden ebeveynlerine yada çocuklarına taşınma sırası.