8.1 Custom Event-lərin yaradılması
Custom Event-lər (və ya istifadəçi hadisələri) JavaScript-də developer-lərə öz xüsusi hadisələrini yaratmağa və dispatch etməyə imkan verir. Bu, tətbiqin müxtəlif hissələri arasında məlumat ötürülməsi və qarşılıqlı əlaqə üçün faydalı ola bilər. Custom Event-lərin yaradılması və istifadəsi koddakı strukturu və elastikliyi yaxşılaşdırır, tətbiqin vəziyyətini idarə etmək və məlumat ötürmək üçün effektiv üsul təmin edir.
Custom Event-ləri yaratmaq üçün CustomEvent konstruktordan istifadə olunur. Bu konstruktor yeni hadisələri özelleştirilebilir parametrlərlə və əlavə məlumatlarla yaratmağa imkan verir.
Sintaksis:
const event = new CustomEvent(type, {detail: additionalData});
Burada:
type: hadisənin adını təmsil edən stringdetail: hadisə ilə birlikdə ötürüləcək əlavə məlumatları ehtiva edən obyekt
Custom Event yaradılmasına nümunə:
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Salam, dünya!' } });
8.2 Kastom hadisələrin dispatç edilməsi
Hadisənin dispatç edilməsi dispatchEvent metodu vasitəsilə həyata keçirilir. Bu metod hadisənin baş verəcəyi elementdə çağırılır.
İzah:
myCustomEventhadisəsi üçünmyButtondüyməsinə handler əlavə olunur, hansı ki, hadisə məlumatlarından mesajı console-da göstərirdetailiçində mesajlamyCustomEventadlı kastom hadisə yaradılır- Hadisə
myButtondüyməsində dispatç edilir, handler çağırılır və mesajı console-da göstərir
Nümunə:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Düymə</button>
<script>
const button = document.getElementById('myButton');
// Kastom hadisə üçün handler əlavə etmək
button.addEventListener('myCustomEvent', function(event) {
console.log('Kastom hadisə alındı:', event.detail.message);
});
// Kastom hadisə yaratmaq və dispatç etmək
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Salam, dünya!' } });
button.dispatchEvent(myEvent);
</script>
</body>
</html>
8.3 Kastom hadisələrin tətbiqi
Kastom hadisələr daha çox modul və dəstəkli kod yaratmaq üçün faydalıdır, xüsusilə komponentlər və mürəkkəb tətbiqlər üzərində işləyərkən. Onlar bir komponentə baş vermiş dəyişikliklər və ya hərəkətlər haqqında digər komponentləri xəbərdar etməyə imkan verir.
İzah:
- Modul A
notifyBkastom hadisəsinimoduleBelementinə göndərir, məlumatı ötürür - Modul B
notifyBhadisəsini dinləyir və onu emal edir, konsolda mesaj çıxarır
Kastom hadisələrin modul tətbiqində istifadəsi nümunəsi:
<!DOCTYPE html>
<html>
<head>
<title>Modullar arasında əlaqə nümunəsi</title>
</head>
<body>
<div id="moduleA">Modul A</div>
<div id="moduleB">Modul B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// Modul A kastom hadisəni göndərir
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Modul A-dan verilənlər' } });
moduleB.dispatchEvent(event);
}
// Modul B kastom hadisəni dinləyir
moduleB.addEventListener('notifyB', function(event) {
console.log('Modul B qəbul etdi:', event.detail.message);
});
// Modul A-da hərəkətin simulyasiyası
notifyModuleB();
</script>
</body>
</html>
8.4 Custom event parametrləri
Custom event-ləri aşağıdakı parametrlər vasitəsilə əlavə tənzimləmək mümkündür:
bubbles: məntiqi dəyər, hadisənin bubbling etməli olduğunu göstərir. Default olaraqfalsecancelable: məntiqi dəyər, hadisənin ləğv edilə biləcəyini göstərir. Default olaraqfalsecomposed: məntiqi dəyər, hadisənin shadow DOM-dan kənara yayılmalı olduğunu göstərir. Default olaraqfalse
Misal:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Parametrləri Misalı</title>
</head>
<body>
<div id="container">
<button id="myButton">Düymə</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.getElementById('myButton');
// Container və düymə üçün listener-lərin əlavə edilməsi
container.addEventListener('customEvent', function(event) {
console.log('Container aldı:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button aldı:', event.detail.message);
});
// Parametrlərlə custom event-in yaradılması və dispatch edilməsi
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Salam düymədən' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>
GO TO FULL VERSION