Birçok web uygulaması, işlevlerini yerine getirmek için bir tür olaya güvenir. Bir noktada, bir insan, bir olay oluşturan arayüzü ile etkileşime girer. Bu insan odaklı olaylar tipik olarak fare veya klavye gibi bir çevre birimi aygıtına dayanır.

Bir cihaz bir olay oluşturduğunda, program belirli davranışı ne zaman gerçekleştireceğini bilmek için onu dinleyebilir. Bu öğreticide, JavaScript kullanarak olayları nasıl dinleyeceğinizi öğreneceksiniz.

Olay Odaklı Programlama Nedir?

Olay güdümlü programlama, işlevlerini yerine getirmek için bir olayın yürütülmesine dayanan bir paradigmanın adıdır. Herhangi bir üst düzey programlama dilinde olaya dayalı bir program oluşturmak mümkündür. Ancak olaya dayalı programlama, en çok JavaScript gibi bir kullanıcı arabirimiyle entegre olan dillerde yaygındır.

Olay Dinleyicisi Nedir?

Olay dinleyicisi, belirli bir olay meydana geldiğinde önceden tanımlanmış bir süreci başlatan bir işlevdir. Böylece, bir olay dinleyicisi bir eylemi "dinler" ve ardından ilgili bir görevi gerçekleştiren bir işlevi çağırır. Bu olay birçok biçimden birini alabilir. Yaygın örnekler arasında fare olayları, klavye olayları ve pencere olayları bulunur.

JavaScript Kullanarak Olay İşleyici Oluşturma

Herhangi bir konuda etkinlikleri dinleyebilirsiniz. DOM'deki öğe. JavaScript'in bir addEventListener() bir web sayfasındaki herhangi bir öğede arayabileceğiniz işlev. bu addEventListener() işlev bir yöntemdir EventTarget arayüz. Olayları destekleyen tüm nesneler bu arabirimi uygular. Buna pencere, belge ve sayfadaki tek tek öğeler dahildir.

addEventListener() işlevi aşağıdaki temel yapıya sahiptir:

element.addEventListener("event", functionToExecute);

Neresi:

• en eleman herhangi bir HTML etiketini temsil edebilir (bir düğmeden bir paragrafa kadar)
• en "Etkinlik" belirli, tanınan bir eylemi adlandıran bir dizedir
• en functionToExecute mevcut bir fonksiyona referanstır

Birkaç HTML öğesi içeren aşağıdaki web sayfasını oluşturalım:

Hoş geldin


 Merhaba, web siteme hoş geldiniz.


Daha fazla bilgi edin





Kullanıcı bilgisi

Kullanıcı adı: 

Göndermek

Yukarıdaki HTML kodu, adlı bir JavaScript dosyasına bağlanan basit bir sayfa oluşturur. app.js. bu app.js dosyası, olay dinleyicilerini ayarlamak için kodu içerecektir. Bu nedenle, bir kullanıcı web sayfasındaki ilk düğmeyi her tıkladığında belirli bir işlemi başlatmak istiyorsanız, içinde oluşturulacak dosya budur.

app.js Dosyası

document.querySelector('.btn').addEventListener("tıklayın", tıklayınDemo)
function clickDemo(){
 konsol.log("Merhaba")
}

Yukarıdaki JavaScript kodu, aşağıdakileri kullanarak sayfadaki ilk düğmeye erişir: sorguSeçici() işlev. Daha sonra kullanarak bu öğeye bir olay dinleyicisi ekler. addEventListener() yöntem. Dinlediği belirli olayın adı “tıklama”dır. Düğme bu olayı tetiklediğinde, dinleyici arayacaktır. tıklamaDemo() işlev.

İlişkili: DOM Seçicilerin Nasıl Kullanılacağını Öğrenin

bu tıklamaDemo() işlevi tarayıcı konsoluna “Merhaba” yazdırır. Düğmeye her tıkladığınızda, bu çıktıyı konsolunuzda görmelisiniz.

"Tıklama" Olay Çıktısı

Fare Olayları Nelerdir?

JavaScript'in bir FareEtkinliği Bir kullanıcının faresiyle etkileşimi nedeniyle meydana gelen olayları temsil eden arayüz. Birkaç olay, FareEtkinliği arayüz. Bu olaylar aşağıdakileri içerir:

• Tıklayın
• dblclick
• fare hareketi
• fareyle üzerine gelmek
• fare çıkışı
• fare
• fare aşağı

bu Tıklayın olay, bir kullanıcının işaretçisi bir öğenin üzerindeyken bir fare düğmesine basıp bıraktığında meydana gelir. Bu tam olarak önceki örnekte meydana gelen şeydir. Yukarıdaki listeden de görebileceğiniz gibi, fare olayları birçok şekilde olabilir.

Başka bir yaygın fare olayı dblclick, çift tıklama anlamına gelir. Bu, bir kullanıcı bir fare düğmesini hızlı bir şekilde art arda iki kez tıkladığında tetiklenir. hakkında dikkate değer bir şey addEventListener() işlevi, onu tek bir öğeye birden çok olay dinleyicisi atamak için kullanabilmenizdir.

İlk Düğmeye bir dblclick Olayı Ekleme

Document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 alert("Bu, bir çift tıklama olayının nasıl oluşturulacağının bir gösterimidir")
}

Yukarıdaki kodu app.js dosyasına eklemek, web sayfasındaki ilk düğme için etkin bir şekilde ikinci bir olay dinleyicisi oluşturacaktır. Bu nedenle, ilk düğmeye iki kez tıklamak tarayıcıda aşağıdaki uyarıyı oluşturacaktır:

Yukarıdaki resimde oluşturulan uyarıyı göreceksiniz ve ayrıca konsolda iki “Merhaba” çıktısının daha olduğunu göreceksiniz. Bunun nedeni, çift tıklama olayının iki tıklama olayının birleşimi olması ve her ikisi için de olay dinleyicilerinin olmasıdır. Tıklayın ve dblclick Etkinlikler.

Listedeki diğer fare olaylarının adları, davranışlarını tanımlar. bu fare hareketi olay, imleç bir öğenin üzerindeyken bir kullanıcı faresini her hareket ettirdiğinde gerçekleşir. bu fare olay, bir kullanıcı bir öğenin üzerinde bir düğmeyi basılı tutup ardından serbest bıraktığında meydana gelir.

Klavye Olayları Nelerdir?

JavaScript'in bir KlavyeEtkinliği arayüz. Bu, bir kullanıcı ile klavyesi arasındaki etkileşimleri dinler. Geçmişte, KlavyeEtkinliği üç olay türü vardı. Ancak, JavaScript o zamandan beri kullanımdan kaldırıldı tuşa basma Etkinlik.

Böylece anahtar ve tuşa basmak olaylar, tek ihtiyacınız olan önerilen iki klavye olayıdır. bu tuşa basmak olay, bir kullanıcı bir tuşa bastığında meydana gelir ve anahtar olay, bir kullanıcı onu serbest bıraktığında meydana gelir.

Yukarıdaki HTML örneğini tekrar ziyaret ederek, klavye olay dinleyicisi eklemek için en iyi yer, giriş öğe.

app.js Dosyasına Klavye Olay Dinleyicisi Ekleme

selamlar = document.querySelector('p');
Document.querySelector('input').addEventListener("keyup", CaptureInput)
function CaptureInput (e){
 selamlar.innerText = (`Merhaba ${e.target.value}, web siteme hoş geldiniz.`)
}

Yukarıdaki kod, sorguSeçici() paragrafa erişme işlevi ve giriş Sayfadaki öğeler. Daha sonra çağırır addEventListener() üzerindeki yöntem giriş için dinleyen eleman, anahtar Etkinlik. ne zaman bir anahtar olay meydana gelir, yakalamaGirdi() işlevi anahtar değeri alır ve sayfadaki paragrafa ekler. bu e parametresi, JavaScript'in otomatik olarak atadığı olayı temsil eder. Bu olay nesnesinin, kullanıcının etkileşimde bulunduğu öğeye bir başvuru olan hedef adlı bir özelliği vardır.

Bu örnekte, ekli etiket giriş alan bir kullanıcı adı ister. Giriş alanına adınızı yazarsanız, web sayfası şuna benzer:

Paragraf şimdi, yukarıdaki örnekte "Jane Doe" olan giriş değerini içerir.

addEventListener Her Türlü Kullanıcı Etkileşimini Yakalar

Bu makale sizi addEventListener() yönteminin yanı sıra onunla kullanabileceğiniz birkaç fare ve klavye olayı. Bu noktada, belirli bir olayı nasıl dinleyeceğinizi ve ona yanıt veren bir işlevi nasıl oluşturacağınızı bilirsiniz.

bu addEventListener ancak üçüncü parametresi aracılığıyla ekstra yetenek sağlar. Olay yayılımını kontrol etmek için kullanabilirsiniz: olayların öğelerden üstlerine veya alt öğelerine geçme sırası.

JavaScript'te Olay Yayılımını Anlama

Etkinlikler, güçlü bir JavaScript özelliğidir. Bir web tarayıcısının onları öğelere karşı nasıl yükselttiğini anlamak, kullanımlarında ustalaşmanın anahtarıdır.

Sonrakini Oku

Yazar hakkında