Event Bubbling Nedir?
Event Bubbling modelinde, bir olay en spesifik elemanda başlar ve daha sonra en az spesifik elemana (document veya hatta window) doğru yukarı doğru akar.
Düğmeye tıkladığınızda, tıklama olayı aşağıdaki sırayla gerçekleşir:
- button
- div with the id container
- body
- html
- document
Click olayı öncelikle tıklanan öğe olan butonda gerçekleşir. Ardından, click olayı DOM ağacında yukarı çıkar ve belge nesnesine ulaşana kadar her düğümü tetikler.
Aşağıdaki resim, kullanıcılar butona tıkladığında Event Bubbling etkisini göstermektedir:
Modern web tarayıcılarının, olayı pencere nesnesine kadar kabarttığını unutmayın.
Event Capturing Nedir?
Event Capturing modelinde, bir olay en az spesifik elemandan başlar ve en spesifik elemana doğru aşağı doğru akar. Düğmeye tıkladığınızda, tıklama olayı aşağıdaki sırayla gerçekleşir:
- document
- html
- body
- div with the id container
- button
Aşağıdaki resim Event Capturing etkisini göstermektedir: