Olay Dinleyicisi nedir?
Olay dinleyicisi, JavaScript'te bir olayın gerçekleşmesini bekleyen ve ardından ona yanıt veren bir işlevdir.. JavaScript, geliştiricilerin etkileşimli web sayfaları oluşturmak için kullandığı bir programlama dilidir. JavaScript'in olay dinleyicisi işlevi; fare tıklamaları, klavye tıklamaları ve pencereyi yeniden boyutlandırma gibi olaylara özel yanıtlar oluşturmanıza olanak tanır. Gerçek zamanlı olayları bekleme ve yanıtlama için programlama paradigmasına olay işleme denir.
Olay dinleyicisi işlevinin söz dizimi nedir?
Olay dinleyicisi işlevi, diğer JavaScript işlevlerine benzer özelliklere sahiptir. Etkinleştirildiğinde, olayı işlemek için gerekli eylemi alır. Örneğin olay dinleyicisi işlevi, görüntülenen metni değiştirebilir, kayıt formlarından bilgi toplayabilir veya veritabanlarında veri depolayabilir.
Olay dinleyicisi söz dizimi
Bir olay dinleyicisi işlevi, bu sonraki örnekte olduğu gibi uygun JavaScript söz dizimini izler.
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
Bu örnekte respondMouseClick olay dinleyicisi işlevini gösterilmiştir. İşlev adını, olay dinleyicisinin amacını yansıtacak şekilde yazmak yaygındır. İşlevde, olay gerçekleştiğinde belirli eylemleri gerçekleştirmek için kodlar yazarsınız. Bu örnekte işlev, MouseClick happened metnini HTML öğesine (textdisplay1) ekler.
Olay işleyici söz dizimi
Alternatif olarak, etkinleştirilmiş olaya yanıt vermek için aşağıdaki örnekte olduğu gibi bir olay işleyici işlevi kullanabilirsiniz.
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
Bu, belirli bir öğedeki çeşitli olay türlerini tek bir işlevle yönetmenize olanak tanır.
Örneğin, olay tabanlı uygulamalarda her türlü blok zinciri olayını işlemek için bir olay dinleyicisi kaydedebilirsiniz. Daha fazla bilgi için Amazon Yönetilen Blok Zinciri ile olay tabanlı bir uygulama oluşturmaya göz atın.
Bir olay dinleyicisini nasıl eklersiniz?
Bir olay dinleyicisi yalnızca ilgili JavaScript öğesine ekledikten sonra etkinleştirilir. Bunu yapmak için söz dizimini şu şekilde kullanabilirsiniz:
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
Örneğin, geliştiriciler tıklama olay dinleyicisini bir düğme öğesine bağlamak için aşağıdaki işlevi çağırabilir.
btn.addEventListener("click", RespondMouseClick);
Mevcut olay işleyicilerinin üzerine yazmadan belirli bir olay nesnesine birden fazla olay dinleyicisi de ekleyebilirsiniz.
Örneğin Amazon Web Services (AWS), geliştiricilerin AWS.Request nesnesi üzerinde birden fazla geri çağırma zincirlemesine olanak tanır. Daha fazla bilgi için AWS'de bir istek nesnesi olay dinleyicisini kullanma bölümünü okuyun.
Olay eklemeye ilişkin parametreler
Önceki söz dizimindeki parametrelerin açıklamasını aşağıda bulabilirsiniz:
- Olay parametresi; tıklama, değiştirme, fareyle üzerine gelme, klavyeyle aşağı inme ve yükleme gibi geçerli bir JavaScript olayıdır.
- Dinleyici parametresi, belirli olaylara yanıt vermek için oluşturulan olay geri çağırma veya JavaScript işlevidir.
- useCapture parametresi, olay yayılma modunu belirten isteğe bağlı bir parametredir. true değerinin yakalamayı, false değerinin ise köpürmeyi etkinleştirdiği Boolean değerlerini kabul eder. Bu parametrenin varsayılan değeri false olarak ayarlanmıştır.
- Seçenekler parametresi, dinleyicinin davranışlarını temsil eden yakalama modu ve reddetme sinyalleri gibi çeşitli isteğe bağlı değerlerden oluşur.
Bir olay dinleyicisini nasıl kaldırırsınız?
Olay dinleyicileri siz ilişkili JavaScript öğelerinden kaldırıncaya kadar aktif kalır. Bunu yapmak için aşağıdaki söz dizimini kullanabilirsiniz.
element.removeEventListener(type, listener, useCapture);
Olay dinleyicisi kaldırma parametreleri, olay dinleyicilerini eklemek için kullandığınız parametrelere benzer. Bir olay dinleyicisini kaldırdığınızda, aynı tür, dinleyici ve useCapture parametrelerini belirtmeniz gerekir. Aksi takdirde, olay dinleyicisi aktif kalmaya ve gelecekteki olayları tetiklemeye devam eder.
Örneğin, aşağıdaki kodla bir olay ekleyebilirsiniz.
button.addEventListener("click", RespondMouseClick, true);
Ancak aşağıdaki kodu uygulamak olay dinleyicisini kaldıramaz. Bunun nedeni, useCapture değerinin düğme nesnesiyle kayıtlı olandan farklı olmasıdır.
button.removeEventListener("click", RespondMouseClick, false);
Olayı başarılı bir şekilde kaldırmak ve tetiklenmesini önlemek için aşağıdaki kodu kullanabilirsiniz.
button.removeEventListener("click", RespondMouseClick, true);
İç içe geçmiş olay dinleyicisi işlevleri nasıl çalışır?
İç içe geçmiş olay dinleyicileri, farklı hiyerarşik katmanlarda HTML öğelerine eklenen olay işleyicileridir.
Aşağıdaki HTML örneğinde, temelde yer alan üst öğe belgeye aitken, alt öğe de üst öğeye aittir.
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
Karmaşık web uygulamalarında, ilgili olay dinleyicisi işlevlerine sahip birden fazla üst-alt katman olabilir. Belirli bir olay meydana geldiğinde, farklı katmanlardaki olay dinleyicilerini belirli bir sırada tetikler. Örneğin, bir alt düğmeye tıklamak, olayı fare tıklaması yakalayan tüm işleyicilere yayar.
Olaylar iki şekilde yayılabilir: köpürme ve yakalama.
Olay köpürmesi
Köpürme, JavaScript olay işlemenin varsayılan modudur. Olayı en iç katmandan en dıştaki katmana yayar.
Örneğin, bir kullanıcı alt bölümdeki bir metin kutusunun üzerine gelebilir. Ardından uygulama, olayı aşağıdaki sırayla geçebilir:
- Alt öğedeki olay işleyicisi, fareyi üzerine getirme olayını işler.
- Ardından, üst olay dinleyicisi olayı işler ve denetimi belgenin olay dinleyicisine iletir.
Olay köpürmesini ayarlamak için aşağıdaki söz dizimini kullanın:
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
Olay yakalama
Olay yakalama, JavaScript'te olayın en dış katmandan içeri doğru yayıldığı özel bir olay işleme modudur. Olay iç katmandaki hedef öğeye ulaştığında, olay işleme modu köpürmeye dönüşür. Daha sonra köpürme, olayı en üst katmana doğru dışarı yayar.
Örneğin, bir kullanıcı bir alt düğmeye tıklayıp aşağıdaki sırayı başlatabilir:
- Belge olay dinleyicisi, fare tıklaması olayını ve ardından üst olay işleyicisini işler.
- Olay, düğme olan hedef öğeye ulaşır. Düğmenin olay dinleyicisi, olayı işler.
- Olay işleme, yakalamadan köpürme moduna geçer.
- Aynı fare tıklaması olayı, belgede sona ermeden önce olay işleyicisini üst öğeye tetikler.
Köpürme ve yakalama arasında seçim yapma
Köpürme ve yakalama, olayları farklı şekilde ele almanıza olanak tanır. Uygulamalardaki çoğu olayı işlemek için yakalama yeterli olduğundan, köpürme nadiren kullanılır.
Köpürme ve yakalama arasında bir seçim yaparken, olayın yayılma akışını ve uygulamanızın programlama mantığıyla nasıl uyumlu olduğunu göz önünde bulundurmalısınız.
Örneğin, iki alt öğeden oluşan bir üst form düşünün. İlk öğe, ikinci öğede bir olay meydana geldiğinde anında güncelleme gerektirir. Bu durumda, yakalama modunu kullanmanız gerekir. Bu, üst olay dinleyicisinin olayı işlemesini ve ilk öğeyi güncellemesini sağlar. Ardından, denetimi ikinci alt öğedeki olay dinleyicisine iletir.
İç içe geçmiş olay dinleyicisi işlevlerinde olay yayılmasını nasıl durdurursunuz?
Olaylar, iç içe geçmiş bir dinleyici düzenlemesinde son hedefe ulaşana kadar yayılır. Olayın daha fazla yayılmasını durdurmak için belirli yöntemler kullanmanız gerekir.
Aşağıdaki yöntem, olay dinleyicisinde olayı durdurur.
event.stopPropagation();
Örneğin, alt düğmede stopPropagation öğesini çağırırsanız fare tıklaması olayı, üst seviyelere ve belge seviyelerine yayılmaz. Dolayısıyla, daha yüksek seviyedeki olay dinleyicileri tetiklenmez.
Tüm olay yayılımını durdurma
stopPropagation yalnızca geçerli olay türünün yayılmasını durdurur. Nesneye kayıtlı farklı türde olay dinleyicileri varsa olaylar stopPropagation çağrısına rağmen tetiklenmeye devam eder.
Belirli bir nesneyle ilgili tüm olayları durdurmak için stopImmediatePropagation yöntemini aşağıdaki gibi kullanabilirsiniz.
event.stopImmediatePropagation();
Bir olay dinleyicisi stopImmediatePropagation öğesini çağırdığında, nesneyle ilişkili başka hiçbir olay dinleyicisi tetiklenmez.
AWS, JavaScript gereksinimlerinizi nasıl destekleyebilir?
Amazon Web Services (AWS), uygulamalarınızdaki hizmetleri kitaplıklar ve API'ler ile kolayca kullanabilmeniz amacıyla JavaScript İçin AWS SDK'yi sunar.
Sunucu tarafı, web ve mobil web uygulamaları geliştirmek için SDK'yi kullanabilirsiniz. SDK; JavaScript çalışma zamanı, Node.JS, React Native ve ayrıca çapraz çalışma zamanını destekler. Bu, geliştiricilerin aynı istemci hizmet paketini farklı platformlarda çalıştırmasına olanak tanır.
SDK'yi kullanmanın diğer avantajları şunlardır:
- SDK, TypeScript ile yazılmıştır. Bu; statik tür denetimi, sınıf ve modül desteği gibi avantajlar sağlar.
- SDK, özel eylemler sunmanıza olanak tanıyan bir ara yazılım yığını sunar.
- SDK, modüler bir mimariye sahiptir. Bu, uygulama performansını optimize etmek için yalnızca gerekli paketleri kullanmanıza olanak tanır.
Hemen bir AWS hesabına kaydolarak JavaScript uygulamalarını kullanmaya başlayın.
