Tarayıcıda olay modeli nedir?

Web tarayıcısında kullanıcı etkileşimleri (tıklamalar, girişler, fareyle üzerine gelme) ve sistem olaylarının (sayfa yükleme, hatalar) işlenmesi yöntemi.

Ana kavramlar:

• Olay: Gerçekleşen eylem.
• Olay işleyicisi: Olay gerçekleştiğinde çalışan fonksiyon.
• Olay nesnesi (Event object): İşleyiciye iletilir ve olay hakkında bilgi içerir (tip, öğe, koordinatlar vb.).

Standart olay akışı:

1. Yakalama (Capturing): Olay, DOM'un en üst öğesinden (Window, Document) hedef öğeye doğru iner. Bu aşamadaki işleyiciler ilk olarak tetiklenir.
2. Hedef aşaması (Target phase): Olay, gerçekleştiği hedef öğeye ulaşır.
3. Bubbling (Bubbling): Olay, hedef öğeden DOM ağacı boyunca tekrar yukarı çıkar ve Window'a ulaşır. Bu aşamadaki işleyiciler, yakalama ve hedef aşamasından sonra tetiklenir.

İşleyicilerin eklenmesi:

• HTML öznitelikleri (onclick, onload): Eski yöntem, karmaşık uygulamalar için önerilmez.
• DOM öğesi özellikleri (element.onclick): Her olay türü için sadece bir işleyici atayabilirsiniz.

  // Örnek
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Butona tıklandı!');
  };
  

• addEventListener yöntemi: Tercih edilen yöntem. Bir olay için birden fazla işleyici eklemeye ve yakalama veya bubbling aşamasını kontrol etmeye olanak tanır.

  // Örnek
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Butona tıklandı!', event);
  }, false); // false - bubbling, true - yakalama
  

removeEventListener yöntemi, işleyicileri kaldırmak için kullanılır.

Olay delegasyonu: Bir ebeveyn öğesine bir işleyici ekleyerek, çocuk öğelerden gelen olayları yönetmek. Kaynak tasarrufu sağlar ve dinamik içeriklerle çalışmayı kolaylaştırır.

// Delegasyon örneği
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Liste öğesine tıklandı:', event.target.textContent);
    }
});