7.1 Event Bubbling (Hadisələrin üzə çıxması)
JavaScript-də bir elementdə baş verən hadisələr DOM ağacı üzrə yayıla bilər. Bu proses hadisələrin yayılması adlanır və iki əsas mexanizmi əhatə edir: hadisələrin üzə çıxması (event bubbling) və hadisələrin tutulması (event capturing).
Hadisələrin yayılma mexanizmləri:
- Event Bubbling (Hadisələrin üzə çıxması).
- Event Capturing (Hadisələrin tutulması).
Hadisələrin üzə çıxması — bu prosesdə bir uşaq elementdə baş verən hadisə, valideynlər zənciri üzrə ardıcıl olaraq yuxarıya doğru yayılar və kök elementə (document) qədər gedib çıxır.
İzah:
childdüyməsi sıxıldıqda, əvvəlcəchildelementində hadisə emalçısı işə düşür (Child clicked).- Daha sonra hadisə
parentelementinə üstə çıxır və onun emalçısı işə düşür (Parent clicked).
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.2 Event Capturing (Hadisələrin ələ keçirilməsi)
Hadisələrin ələ keçirilməsi — bu o prosesdir ki, hadisə əvvəlcə kök elementdən başlayıb valideynlər zəncirindən aşağıya doğru hərəkət edir və sonra hadisənin baş verdiyi hədəf elementə çatır.
Hadisələrin ələ keçirilməsini istifadə etmək üçün, event listener əlavə edərkən capture parametrini true etmək lazımdır.
İzah:
-
childdüyməsi basıldıqda, əvvəlcə valideyn elementdə event handler işə düşür (Parent clicked) bucaptureparametrinintrueolaraq təyin edilməsinə görə baş verir. - Daha sonra hadisə hədəf elementə -
child-a çatır və onun event handler-i işə düşür (Child clicked)
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Event Capturing Misalı</title>
</head>
<body>
<div id="parent">
<button id="child">Məni klikləyin</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.3 Eventlərin yayılması üç mərhələli modeli
DOM-da baş verən hadisə üç mərhələdən ibarətdir:
1. Capturing Phase (Qəbul etmə mərhələsi). Hadisə kök elementdən (adətən document) başlayaraq valideynlərin zənciri vasitəsilə hədəf elementinə qədər yayılır.
2. Target Phase (Hədəf mərhələsi). Hadisə baş verdiyi hədəf elementinə çatır.
3. Bubbling Phase (Yuxarı qalxma mərhələsi). Hadisə hədəf elementindən başlayaraq valideynlərin zənciri vasitəsilə kök elementə qədər yayılır.
Eventlərin yayılmasını idarəetmə
Eventlərin yayılmasını idarə etmək üçün metodlar mövcuddur:
stopPropagation(). Hadisənin daha da yayılmasını həm yuxarı qalxma, həm də qəbul etmə zamanı dayandırır.stopImmediatePropagation(). Hadisənin daha da yayılmasını və cari elementdə digər event handler-lərin icrasını qarşısını alır.preventDefault(). Hadisə ilə əlaqəli default hərəkəti (məsələn, düyməyə basdıqda forma göndərilməsini) ləğv edir.
7.4 stopPropagation istifadə nümunəsi
İzahat:
- Button
childkliklənəndə,childelementinə aid event handler işə düşür (Child clicked) - Event-in bubblinqi
event.stopPropagation()ilə dayandırılır və parent elementinə aid event handler işə düşmür
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation Misalı</title>
</head>
<body>
<div id="parent">
<button id="child">Kliklə</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent kliklənib');
});
child.addEventListener('click', function(event) {
console.log('Child kliklənib');
event.stopPropagation(); // Event bubblinqini dayandırır
});
</script>
</body>
</html>
GO TO FULL VERSION