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

JavaScript'teki olaylar, bir kullanıcı etkileşiminin veya başka bir işlemin gerçekleştiğine dair bildirimler gibi davranır. Örneğin, bir form düğmesine tıkladığınızda, tarayıcınız bunun olduğunu belirtmek için bir olay oluşturur. Bir arama kutusuna yazmak da olayları artırır ve otomatik önerme genellikle çevrimiçi olarak bu şekilde çalışır.

JavaScript'te, kullanıcı etkileşimini içeren olaylar genellikle belirli öğelere karşı tetiklenir. Örneğin, bir düğmeye tıklamak, o düğmeye karşı bir olay oluşturur. Ancak olaylar da yayılır: belge hiyerarşisindeki diğer öğelere karşı tetiklenirler.

Olay yayılımı ve mevcut iki farklı tür hakkında her şeyi öğrenmek için okumaya devam edin.

JavaScript'te Olay İşleme Nedir?

Bir web sayfasının ortaya çıkardığı olayları yakalamak ve bunlara yanıt vermek için JavaScript kodunu kullanabilirsiniz. Bunu, varsayılan davranışı geçersiz kılmak veya varsayılan olmadığında harekete geçmek için yapabilirsiniz. Yaygın bir örnek, form doğrulamadır. Olay işleme, normal form gönderme sürecini kesintiye uğratmanıza olanak tanır.

Bu örneği düşünün:

Beni tıkla

Yukarıdaki kod, düğme adında bir kimliğe sahip bir düğme öğesine sahiptir. Mesajla birlikte bir uyarı görüntüleyen bir tıklama olay dinleyicisine sahiptir. Selam Dünya.

Olay Yayılımı Nedir?

Olay yayılımı, olayların olay örgüsü boyunca ilerlediği sırayı tanımlar. DOM ağacı web tarayıcısı onları ateşlediğinde.

Bir div etiketinin içinde bir form etiketi olduğunu ve her ikisinin de onclick olay dinleyicilerine sahip olduğunu varsayalım. Olay Yayılımı, bir olay dinleyicisinin birbiri ardına nasıl tetiklenebileceğini açıklar.

İki tür yayılma vardır:

1. Olayların çocuktan ebeveyne yukarı doğru kabardığı olay köpürmesi.
2. Olayların ebeveynden çocuğa aşağı doğru hareket ettiği olay yakalama.

JavaScript'te Olay Kabarması Nedir?

Olay köpürmesi, olay yayılımının yönünün alt öğeden üst öğeye olacağı anlamına gelir.

Aşağıdaki örneği düşünün. Üç iç içe öğeye sahiptir: div, form ve düğme. Her elemanın bir Tıklayın olay dinleyicisi Tarayıcı bir uyarmak her öğeye tıkladığınızda bir mesajla.

Varsayılan olarak, web tarayıcısının uyarıları görüntüleme sırası düğme, form ve ardından div olacaktır. Olaylar, çocuktan ebeveyne dalgalanır.

 div


 form 



 Buton

Olay Yakalama Nedir?

Olay yakalamada, yayılma sırası köpürmenin tersidir. Aksi takdirde, konsept aynıdır. Yakalama ile tek fark, olayların ebeveynden çocuğa gerçekleşmesidir. Önceki örneğin aksine, olay yakalama ile tarayıcı uyarıları şu sırayla görüntüler: div, form ve düğme.

Olay yakalamayı başarmak için kodda yalnızca bir değişiklik yapmanız gerekir. ikinci parametresi addEventListener() yayılma türünü tanımlar. Köpürmeyi temsil etmek için varsayılan olarak yanlıştır. Olay yakalamayı etkinleştirmek için ikinci parametreyi true olarak ayarlamanız gerekir.

 div.addEventListener("tıkla", ()=>{
 uyarı ("div")
 }, doğru);
 form.addEventListener("tıkla", ()=>{
 uyarı ("form")
 }, doğru);
 button.addEventListener("tıkla", ()=>{
 uyarı ("düğme")
 }, doğru);

Olay Yayılmasını Nasıl Önleyebilirsiniz?

kullanarak olayların yayılmasını durdurabilirsiniz. yayılımı durdur() yöntem. bu addEventListener() yöntem bir olay adı ve bir işleyici işlevi kabul eder. İşleyici, parametresi olarak bir olay nesnesi alır. Bu nesne olayla ilgili tüm bilgileri tutar.

çağırdığınızda yayılımı durdur() yöntemi, olayın o noktadan itibaren yayılmasını durduracaktır. Örneğin, kullandığınızda yayılımı durdur() form öğesinde, olaylar div'e kadar köpürmeyi durduracaktır. Düğmeyi tıklarsanız, düğme ve formda ortaya çıkan olayları görürsünüz, ancak div'de değil.

form.addEventListener("tıkla", (e)=>{
e.stopPropagation();
 uyarı ("form");
});

İlişkili: Nihai JavaScript Hile Sayfası

JavaScript'in Altında Çok Fazla Gücü Var

JavaScript'in olay işlemesi güçlüdür ve birçok tam gelişmiş arayüz diliyle karşılaştırılabilir. Etkileşimli web uygulamaları geliştirirken, araç kutunuzun hayati bir parçasıdır. Ancak kavranması gereken başka birçok gelişmiş konu var. Profesyonel JavaScript geliştiricileri için öğrenecek çok şey var!

JavaScript'i bir profesyonel gibi kodlamayı öğrenmek istiyorsanız, akıllıca bir gömlek kılavuzumuza göz atın ve bir sonraki röportajınızda şaşırtmaya hazırlanın.

Bilmeniz Gereken 11 JavaScript Tek Yönlü

Bu geniş JavaScript tek satırlık yelpazesini kullanarak sadece küçük bir kodla çok şey elde edin.

Sonrakini Oku

Yazar hakkında