Javascript'te Olay Köpürtme ve Olay Yakalama Açıklaması: Nasıl Kullanılır?
Yayınlanan: 2020-03-26İçindekiler
Tanıtım
JavaScript'te olay akışı için kullanılan çok yaygın iki terminoloji, Event Bubbling ve Event Capturing'dir .
Bunlar, her iki öğe de bir olay için bir tanıtıcı kaydettiğinde ve olay başka bir öğede yuvalanmış bir öğede gerçekleştiğinde, bir olayın HTML DOM API'sinde yayılmasının iki önemli yoludur. Bir olayın öğeler tarafından alınma sırası, olayın yayılma modu tarafından belirlenir. JavaScript'te Event Bubbling ve Event Capturing'in kullanımını ve bunların web sayfası geliştirmede neden gerekli olduğunu öğrenmek için okumaya devam edin .
Önemli çıkarımlar
- Olay, olay akışı, olay işleyicileri ve olay dinleyicileri terimlerini açıklama
- JavaScript'te Olay Köpürtme ve Olay Yakalama
- JavaScript'te Olay Köpürtme ve Olay Yakalamanın Faydası
Olaylar ve olay akışı
HTML web sayfalarının JavaScript ile etkileşimine, sayfa kullanıcı veya tarayıcı tarafından manipüle edildiğinde meydana gelen olaylar aracılık eder. Bir sayfanın yüklenmesi, kullanıcının bir düğmeye tıklaması, bir pencereyi kapatması olay örnekleridir.
Olayların web sayfasında alınma sırasına olay akışı denir. Olay akışı süreci 3 adımda tamamlanır – olay yakalama (olayı yakalama), olay hedefleme (hedef olayı alır) ve olay köpürme (olayın yanıtı).
JavaScript'te Olay İşleyicileri ve Olay Dinleyicileri
Olay İşleyici, <script> etiketleri yerine HTML etiketlerinin içine yazılan bir JavaScript kodudur. Olay İşleyiciler, bir düğmeye basmak gibi bir olay meydana geldiğinde JavaScript'i yürütür. Temel sözdizimi şöyledir: name_of_handler=”JavaScript kodu burada”
<a href=”https://www.google.com” onClick=”alert('hello!”)”>Goolge</a>
Bir olayın meydana gelmesini bekleyen bir prosedür, bir Olay Dinleyicisidir. JavaScript, dinlemek için olayı alan ve söz konusu olay başlatıldığında ikinci bir argüman çağıran addEventListener() adında yerleşik bir işleve sahiptir . Sözdizimi şöyledir: element.addEventListener(event, listener);
JavaScript'te Olay Kabarması
Event Bubbling, JavaScript kullanarak bir web sayfası veya web uygulaması geliştirirken karşılaşılan yaygın bir terminolojidir. Olay köpürmesi, olayın DOM'daki en spesifik öğede veya en derin şekilde yuvalanmış düğümde başladığı ve ardından en az spesifik olan düğüme, yani belgeye doğru yukarı doğru aktığı zaman, olay akışı sürecindeki bir aşamadır.
Kaynak
<!DOCTYPE HTML>
<html>
<kafa>
<title>……</title>
</head>
<body>
<div id=”demo”> Buraya basın.</div>
</body>
</html>
<div> öğesi tıklandığında, 'tıklama' olayı aşağıdaki sırayla gerçekleşir:
- <div>
- <body>
- <html>
- belge
'Tıklama' olayı <div> öğesini tetikler. Her düğüm daha sonra DOM ağacı boyunca yukarı doğru, nesne belgesine ulaşılana kadar tetiklenir.
Okuyun: Tam yığın Proje Fikirleri ve Konuları
JavaScript'te Olay Yakalama
Event Capturing, ilk kez Netscape Browser tarafından tanıtılan, olay akışında alternatif bir modeldir. Bu model tarafından belirtildiği gibi, bir olay önce en az spesifik düğüm tarafından alınır ve en spesifik düğüm veya en derin yuvalanmış eleman olayı en son alır. Bu modelde, bir olay gerçek hedefe ulaşmadan önce durdurulur. Ancak, Event Bubbling'den farklı olarak, modern tarayıcılar bu model için destekten yoksundur ve bu nedenle, Event Capturing yalnızca belirli durumlarda kullanılabilir.
Kaynak
Önceki bölümde belirtilen örneğe atıfta bulunarak, <div> öğesinin tıklanması aşağıdaki sırayla 'tıklama' olayını tetikler:
- belge
- <body>
- <html>
- <div>
Olay Yakalama Aşamasında ne olur?
Olay yakalama aşamasında değeri “true” olarak kaydedilen yakalayıcı dinleyiciler çağrılır. Aşağıdaki şekilde yazılmıştır:
el.addEventListener('Tıkla', dinleyici, doğru)
Dinleyicinin değeri "true" olarak kaydedildiği için burada bir olay yakalanır. Herhangi bir değerin olmaması durumunda, varsayılan değer "false" olur ve sonuç olarak olay yakalanmaz. Dolayısıyla bu aşamada yalnızca gerçek değeri olan olaylar çağrılır ve yakalanır. Sonraki hedef aşamasında, değerlerinin doğru veya yanlış olarak kaydedilmesine bakılmaksızın, kaydedilen tüm dinleyiciler çağrılır.
JavaScript'te DOM olay akışı
DOM Düzey 2, olay akışı modelinin üç aşamasını belirtir:
- Olay Yakalama Aşaması
- hedefte
- Olay Köpürme Aşaması
Kaynak
Olayı engelleme fırsatı varsa, önce Olay Yakalama gerçekleşir. Bunu, olayı alan gerçek hedef takip eder. En sonunda, Olay Köpürme Aşamasında, Olaya verilen son tepki gerçekleşir. Önceki bölümde belirtilen örneğe atıfta bulunarak, <div> öğesinin tıklanması, yukarıdaki şemada gösterilen sırayla 'tıklama' olayını tetikler.
Okuyun: Hindistan'da Tam Yığın Geliştirici Maaşı
JavaScript'te Olay Köpürtme ve Olay Yakalamanın Faydası
Event Bubbling Aşamasında, sadece “false” (yakalamayan) bayrak değerine sahip olaylar çağrılır. Olay Köpürtme ve Olay Yakalama , DOM'nin önemli yönleridir.
el.addEventListener('Click', dinleyici, yanlış) // dinleyici yakalamıyor
el.addEventListener('Tıkla', dinleyici) // dinleyici kayıt yapmıyor
Yukarıdaki kod, köpürme ve yakalama aşamalarının nasıl çalıştığını örneklemektedir. Her olay hedefe ulaşmaz. Bazı olaylar balonlanmaz ve hedef aşamadan sonra durur. Bubbling olayı her türlü olay için geçerli değildir ve dinleyici, olayın nesnesinin Boolean özelliği “.bubble”a sahip olmalıdır, bunun yanı sıra – e.target (olayın hedefini referans almak için) ve diğer bazı özelliklere sahip olmalıdır. e.eventPhase (mevcut dinleyiciler bu moda kaydolur).
Çözüm
JavaScript'teki olay akışının üç önemli aşaması vardır: Olay Yakalama aşaması, hedef aşaması ve Olay Köpürme Aşaması. Olay Yakalama, gerektiğinde olayların durdurulduğu ilk gerçekleşendir. Bunu, gerçek hedefe ulaşan olay takip eder ve bir olaya nihai yanıtın gerçekleştiği son aşama köpürmedir. Bu nedenle, JavaScript'te Event Bubbling ve Event Capturing'in, olay işleyicinin ve olay delegasyonunun bağımlı olduğu temeller olduğu uygun bir şekilde sonucuna varılabilir.
Tam yığın hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin çalışan profesyoneller için tasarlanmış ve 500+ saatlik zorlu eğitim, 9+ proje ve ödev, IIIT- sunan Full-stack Yazılım Geliştirmede PG Diplomasına göz atın. B Mezun statüsü, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.