Brauzerdə hadisə modeli nədir?

İstifadəçi qarşılıqlı əlaqələrinin (kliklər, giriş, hover) və sistem hadisələrinin (səhifənin yüklənməsi, səhvlər) veb brauzerdə işlənməsi üsulu.

Əsas anlayışlar:

• Hadisə: baş verən hərəkət.
• Hadisə idarəedicisi: Hadisə baş verdikdə icra olunan funksiya.
• Hadisə obyekti (Event object): İdarəediciyə ötürülür və hadisə haqqında məlumatları ehtiva edir (növü, element, koordinatlar və s.).

Standart hadisə axını:

1. Yakala (Capturing): Hadisə DOM-un ən yuxarı elementindən (Window, Document) hədəf elementə enir. Bu mərhələdəki idarəedicilər ilk olaraq işə düşür.
2. Hədəf mərhələsi (Target phase): Hadisə baş verdiyi hədəf elementə çatır.
3. Bubbling (Bubbling mərhələsi): Hadisə hədəf elementindən DOM ağacında yuxarı qalxaraq Window-ə çatır. Bu mərhələdəki idarəedicilər, yakalama və hədəf mərhələsindən sonra işə düşür.

İdarəedicilərin əlavə olunması:

• HTML atributları (onclick, onload): Köhnə üsul, mürəkkəb tətbiqlər üçün tövsiyə edilmir.
• DOM elementlərinin xüsusiyyətləri (element.onclick): Hər hadisə tipi üçün yalnız bir idarəedicini təyin etmək mümkündür.

  // Nümunə
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Düyməyə basıldı!');
  };
  

• addEventListener metodu: Üstünlük verilən üsul. Bir hadisə üçün bir neçə idarəedicini əlavə etməyə və idarəetmə mərhələsini (yakalama və ya bubblinq) idarə etməyə imkan verir.

  // Nümunə
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Düyməyə klik!', event);
  }, false); // false - bubblinq, true - yakalama
  

removeEventListener metodu idarəediciləri silmək üçün istifadə olunur.

Hadisə nümayəndəliyi: Bir valideyn elementə bir idarəedicini əlavə etmək və uşaq elementlərin hadisələrini idarə etmək. Resursları qənaət edir və dinamik məzmun ilə işləməni sadələşdirir.

// Nümunə nümayəndəlik
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Siyahı elementinə klik:', event.target.textContent);
    }
});