6.1 Hadisə obyekti
JavaScript güclü hadisə sistemi təqdim edir, bu sistem istifadəçinin müxtəlif fəaliyyətlərini və brauzerdə baş verən digər hadisələri izləməyə imkan verir. Hadisələrlə işləmənin vacib hissəsi hadisə obyekti olub, bu obyekt hadisə haqqında məlumatları saxlayır və onun işlənməsi üçün metodlar təqdim edir.
Hadisə baş verəndə, brauzer hadisə haqqında məlumatı saxlayan bir hadisə obyekti yaradır. Bu obyekt hadisə emaledicisinə arqument kimi ötürülür.
Hadisə obyektinin xüsusiyyətləri:
type: hadisənin tipi (məsələn,click,keydown).target: hadisənin baş verdiyi element.currentTarget: hadisə emaledicisinin bağlandığı element.eventPhase: hadisə mərhələsi (tutma, hədəf, yüksəlmə).bubbles: hadisənin yüksələ biləcəyini bildirən məntiqi dəyər.cancelable: hadisəni ləğv etmək mümkünlüyünü bildirən məntiqi dəyər.defaultPrevented: standart hərəkətin qarşısının alındığını bildirən məntiqi dəyər.timeStamp: hadisə yaradıldığı zaman.isTrusted: hadisənin istifadəçi tərəfindən, yoxsa skript vasitəsilə başladıldığını bildirən məntiqi dəyər.
Hadisə obyektinin metodları:
preventDefault(): hadisə ilə bağlı standart hərəkəti ləğv edir.stopPropagation(): hadisənin daha da ötürülməsinin qarşısını alır.stopImmediatePropagation(): hadisənin daha da ötürülməsini dayandırır və cari element üçün digər hadisə emaledicilərinin icrasını qarşısını alır.
Hadisə obyektinin istifadəsinin nümunəsi:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hadisə Obyekti Nümunəsi</title>
</head>
<body>
<button id="myButton">Məni kliklə</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Hadisə tipi:', event.type); // Nəticə: click
console.log('Hadisə hədəfi:', event.target); // Nəticə: <button id="myButton">Məni kliklə</button>
console.log('Cari hədəf:', event.currentTarget); // Nəticə: <button id="myButton">Məni kliklə</button>
console.log('Hadisə mərhələsi:', event.eventPhase); // Nəticə: 2 (Hədəf mərhələsi)
console.log('Yüksəlirmi:', event.bubbles); // Nəticə: true
console.log('Ləğv edilə bilərmi:', event.cancelable); // Nəticə: true
console.log('Saat vaxtı:', event.timeStamp); // Millisaniyə ilə zaman
console.log('Etibarlıdırmı:', event.isTrusted); // Nəticə: true
});
</script>
</body>
</html>
6.2. Klik hadisələri (Mouse Events)
Mouse hadisələri istifadəçi mouse ilə elementlə qarşılıqlı əlaqədə olduqda yaranır:
click: klik hadisəsidblclick: ikiqat klik hadisəsimousedown: mouse düyməsini basma hadisəsimouseup: mouse düyməsini buraxma hadisəsimousemove: mouse hərəkəti hadisəsimouseover: mouse elementin üzərinə yönəltmə hadisəsimouseout: mouse elementdən uzaqlaşdırma hadisəsi
Nümunə:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Misalı</title>
</head>
<body>
<button id="myButton">Məni Kliklə</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Düymə klik olundu');
console.log('Hadisə növü:', event.type);
console.log('Hədəf element:', event.target);
});
</script>
</body>
</html>
6.3 Yükləmə Hadisələri (Load Events)
Yükləmə hadisələri resurs tam yükləndikdə baş verir:
load: resurs/səhifə tam yükləndikdə yaranan hadisəDOMContentLoaded: ilkin HTML-dökümantasiya yüklənib və təhlil edildikdə (tam stil cədvəlləri, şəkillər və ya alt çərçivələrin yüklənməsini gözləmədən) baş verən hadisə
Nümunə:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Yükləmə Hadisələrinin Nümunəsi</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Pəncərə tam yükləndi');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM tam yükləndi və təhlil edildi');
});
</script>
</body>
</html>
6.4 Fokus hadisələri (Focus Events)
Fokus hadisələri element fokus alanda və ya itirəndə yaranır.
focus: element fokus alanda baş verən hadisəblur: element fokus itirəndə baş verən hadisə
Nümunə:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Bir şey yazın...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Mətni daxil etmək üçün sahə fokuslandı');
});
input.addEventListener('blur', function(event) {
console.log('Mətni daxil etmək üçün sahə fokus itirdi');
});
</script>
</body>
</html>
6.5 Klaviatura hadisələri (Keyboard Events)
Klaviatura hadisələri istifadəçi klaviatura düymələrini basdığı zaman yaranır:
keydown: hadisə, düymə basıldığı zaman baş verirkeyup: hadisə, düymə buraxıldığı zaman baş verirkeypress: hadisə, düymə basılıb və buraxıldığı zaman baş verir (köhnəlmiş hadisədir, istifadə tövsiyə edilmir)
Nümunə:
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Nəsə yazın...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Aşağı düymə:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Yuxarı düymə:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION