5.1 Hadisələrlə işləməyə giriş
JavaScript-də hadisələr istifadəçi ilə qarşılıqlı əlaqə qurmağa və onun hərəkətlərinə reaksiya verməyə imkan yaradır, məsələn, siçan klikləri, klaviş vuruşları, formadakı dəyişikliklər və daha çox. Hadisə dinləyicilərini əlavə etmək və silmək necə başa düşmək — interaktiv veb tətbiqləri yaratmağın vacib bir hissəsidir.
Hadisələr nədir?
Hadisə — brauzerdən gələn bir siqnaldır ki, nə isə baş verdiyini bildirir. Məsələn, istifadəçi düyməni kliklədi və ya səhifə yükləndi. Hadisələr bu siqnallara cavab olaraq müəyyən əməliyyatları yerinə yetirmək imkanı verir.
Hadisələrin növləri
Çoxlu hadisə növləri mövcuddur. Ən çox istifadə olunanlardan bəziləri bunlardır:
- Siçan:
click,dblclick,mouseover,mouseout,mousedown,mouseup,mousemove - Klaviatura:
keydown,keyup,keypress - Forma:
submit,change,focus,blur - Sənəd/Pəncərə:
load,resize,scroll,unload
Hadisə dinləyiciləri
Hadisə dinləyiciləri (və ya listenerlər) — müəyyən bir hadisəyə cavab olaraq icra olunan funksiyalardır. Onlar müəyyən hadisələri "dinləyir" və həmin hadisələr baş verdikdə işə düşür.
5.2 Hadisə emalçılarının əlavə edilməsi
Hadisə emalçılarının addEventListener ilə əlavə olunması
addEventListener metodu elementlərə hadisə emalçılarını əlavə etməyə imkan verir. Bu metod ənənəvi hadisə əlavəetmə üsulları ilə müqayisədə daha çox elastiklik və nəzarət imkanı yaradır, məsələn HTML atributlarının istifadəsi (onclick, onchange və s.).
Sintaksis:
element.addEventListener(event, handler, options);
Harada:
element: hadisə emalçısı əlavə olunan elementevent: reaksiya verməli olunan hadisənin tipi (məsələn, 'click', 'input', 'keydown')handler: hadisə baş verdikdə çağırılacaq funksiyaoptions: əlavə parametrlər (istəyə bağlı arqument)
Nümunə: click hadisə emalçısının əlavə olunması
Bu nümunədə hadisə emalçısı bir düyməyə əlavə olunur. İstifadəçi düyməyə klik etdikdə, xəbərdarlıq mesajı göstərilir.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Düyməyə klik edildi!');
});
</script>
</body>
</html>
Nümunə: Bir neçə hadisə emalçısının əlavə olunması
addEventListener metodu ilə bir hadisəyə bir neçə emalçı əlavə edə bilərsiniz.
Bu nümunədə, düyməyə iki hadisə emalçısı əlavə olunur. Klik etdikdə hər iki emalçı ardıcıl olaraq icra olunur və müvafiq mesajlar konsola çıxarılır.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Birinci emalçı');
});
button.addEventListener('click', function() {
console.log('İkinci emalçı');
});
</script>
</body>
</html>
5.3 options parametrlərinin istifadəsi
options parametri hadisə emalçısının davranışını tənzimləməyə imkan verir. Ən çox istifadə olunan opsiyalar:
once: əgərtrueolarsa, emalçı yalnız bir dəfə çağırılır və sonra avtomatik olaraq silinircapture: əgərtrueolarsa, hadisə qabarma mərhələsi yerinə tutma mərhələsində emal edilirpassive: əgərtrueolarsa, emalçının heç vaxtpreventDefault()çağırmayacağını göstərir
Nümunə: Yalnız bir dəfə işləyən emalçı
Bu nümunədə hadisə emalçısı yalnız bir dəfə işləyəcək və sonra avtomatik olaraq silinəcək.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Məni kliklə</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Bu yalnız bir dəfə göstəriləcək');
}, { once: true });
</script>
</body>
</html>
5.4 Hadisə işləyicilərinin silinməsi
removeEventListener ilə hadisə işləyicilərinin silinməsi
removeEventListener metodu əvvəllər addEventListener vasitəsilə əlavə edilmiş hadisə işləyicilərini silməyə imkan verir. Bunun üçün işləyicinin əlavə olunmasında istifadə edilən eyni arqumentləri keçirmək lazımdır.
Sinaksis:
element.removeEventListener(event, handler, options)
Burada:
element: hadisə işləyicisinin silindiyi elementevent: işləyicisinin silinməsi lazım olan hadisənin tipihandler: hadisə işləyicisi kimi təyin edilmiş funksiyaoptions: əlavə parametrlər (işləyicinin əlavə edilməsində istifadə olunan parametrlərlə uyğun olmalıdır)
Misal: click hadisə işləyicisinin silinməsi
Bu nümunədə click hadisə işləyicisi bir düyməyə əlavə olunur. Başqa bir düyməni sıxmaq click hadisə işləyicisini silir.
<!DOCTYPE html>
<html>
<head>
<title>Event Misalı</title>
</head>
<body>
<button id="myButton">Məni Bas</button>
<button id="removeButton">Click İşləyicisini Sil</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function clickHandler() {
alert('Düymə basıldı!');
}
button.addEventListener('click', clickHandler);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', clickHandler);
alert('Click işləyicisi silindi');
});
</script>
</body>
</html>
GO TO FULL VERSION