Olay İşleme
Olay İşleme (Event Handling) JavaScript’te, kullanıcıların web sayfası ile etkileşimlerini algılamak ve bunlara tepki vermek için kullanılan temel bir tekniktir. Bu, bir butona tıklama, form gönderimi, fare hareketleri veya klavye girdileri gibi kullanıcı eylemlerini kapsar. Etkileşimli web uygulamaları geliştirmek için Olay İşleme vazgeçilmezdir. Örneğin, bir kişisel web sitesinde menülerin açılması veya projelerin gösterilmesi; bir blogda yorum ekleme veya “beğen” butonlarının çalışması; bir e-ticaret sitesinde sepetin güncellenmesi veya ürün filtreleme; haber sitelerinde kategorilere göre içerik filtreleme gibi işlevlerde etkin şekilde kullanılır. Olay İşleme, bir evi inşa etmek gibidir: her ışık, her kapı ve her anahtar doğru şekilde bağlanmalı ve çalışmalıdır. Bu derste, DOM öğelerini seçmeyi, Event Listener eklemeyi, Event nesnesini kullanmayı, tarayıcı varsayılan davranışlarını önlemeyi ve olay yayılımını kontrol etmeyi öğreneceksiniz. Ayrıca karmaşık uygulamalarda olayları organize etmeyi ve yönetmeyi, tıpkı bir odayı dekore ederken her eşyanın yerine konması gibi öğreneceksiniz. Bu bilgilerle kullanıcı dostu ve etkileşimli arayüzler oluşturabileceksiniz.
Temel Örnek
javascript// Basic click event example
const buton = document.querySelector('#butonTest'); // Select button element
buton.addEventListener('click', function(event) {
alert('Butona tıklandı!'); // Show alert on click
console.log('Olay detayları:', event); // Log event object
});Bu temel örnekte, document.querySelector('#butonTest') ile bir DOM öğesi seçiyoruz ve addEventListener ile click olayını dinliyoruz. Fonksiyon event nesnesini parametre olarak alır; bu nesne, olayın tipi, hedef öğesi ve fare koordinatları gibi bilgileri içerir. alert() kullanıcıya bilgi verirken, console.log() geliştiriciye olay nesnesini inceleme imkânı sunar. Bu yaklaşım, e-ticaret sitelerinde “Sepete Ekle” butonları, bloglarda “beğen” işlevleri veya haber sitelerinde filtrelemeler için yaygın olarak kullanılır. Daha ileri düzeyde, event.preventDefault() ile varsayılan tarayıcı davranışlarını engelleyebilir, event.stopPropagation() ile olay yayılımını kontrol edebilirsiniz. addEventListener, aynı öğeye birden fazla olay dinleyici eklemeyi sağlar ve var olanları üzerine yazmaz; bu, evdeki elektrik tesisatını planlamak gibi dikkat ve düzen gerektirir.
Pratik Örnek
javascript// Practical example: dynamic blog post filtering
const kategoriler = document.querySelectorAll('.kategori'); // Select all categories
const blogAlan = document.querySelector('#blogAlan');
kategoriler.forEach(kategori => {
kategori.addEventListener('click', function(event) {
const secilen = event.target.dataset.kategori; // Get selected category
blogAlan.innerHTML = `Yükleniyor: ${secilen} kategorisi...`;
fetch(`/api/blog?kategori=${secilen}`) // Fetch data from backend
.then(response => response.json())
.then(data => {
blogAlan.innerHTML = data.makaleler.map(makale => `<h3>${makale.baslik}</h3><p>${makale.ozet}</p>`).join('');
})
.catch(err => {
blogAlan.innerHTML = 'Haberler yüklenemedi.';
console.error(err);
});
});
});Bu pratik örnekte, document.querySelectorAll('.kategori') ile blog kategorilerini seçiyoruz ve her birine click olayı ekliyoruz. Olay tetiklendiğinde, event.target.dataset.kategori ile seçilen kategori bilgisine ulaşılır. Yükleniyor mesajı gösterilir ve fetch ile backend’den veri alınır. Gelen veriler blogAlan öğesinde güncellenir; hata durumunda kullanıcıya bilgi verilir ve konsola kaydedilir. Bu yöntem, haber sitelerinde filtreleme, e-ticaret ürün filtreleme veya sosyal platformlarda içerik güncelleme gibi durumlar için idealdir. Daha ileri teknikler arasında Event Delegation, throttling/debouncing ve asenkron hata yönetimi bulunur. Olay yönetimi, bir kütüphaneyi düzenlemek gibi sistematik ve düzenli olmalıdır.
En iyi uygulamalar ve yaygın hatalar: 1) Inline olay yönetimi yerine addEventListener kullanmak, 2) Kullanılmayan Event Listener’ları removeEventListener ile kaldırmak, 3) Yüksek frekanslı olaylarda throttling veya debouncing kullanmak, 4) Asenkron işlemlerde hata yönetimi yapmak. Yaygın hatalar: silinmiş öğelere Event Listener bırakmak, preventDefault veya stopPropagation’ı yanlış kullanmak, dinamik öğelere doğrulama yapmadan olay eklemek, olay ve DOM manipülasyonunu karıştırmak. Hata ayıklama ipuçları: console.log ile event ve target incelemek, DevTools ile listener’ları kontrol etmek, olay zincirini adım adım izlemek. Öneriler: olay mantığını modüler şekilde organize etmek, DOM manipülasyonu ve iş mantığını ayırmak, her olayın sorumluluğunu net belirlemek; tıpkı bir odanın düzgün şekilde dekore edilmesi gibi.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| addEventListener() | Bir öğeye olay dinleyici ekler | buton.addEventListener('click', func) |
| removeEventListener() | Daha önce eklenmiş olay dinleyiciyi kaldırır | buton.removeEventListener('click', func) |
| event.target | Olayı tetikleyen öğeye referans | console.log(event.target) |
| event.preventDefault() | Tarayıcı varsayılan davranışını engeller | event.preventDefault() |
| event.stopPropagation() | Olayın yayılımını durdurur | event.stopPropagation() |
| dataset | Özel veri özniteliklerine erişim sağlar | element.dataset.kategori |
Bu derste Olay İşleme kavramlarını ve pratik yöntemlerini öğrendiniz. addEventListener, Event nesnesi, varsayılan davranışların engellenmesi ve olay yayılımı kontrolü ile interaktif, performanslı uygulamalar geliştirebilirsiniz. Olay yönetimi DOM manipülasyonu ile doğrudan bağlantılıdır ve sıklıkla backend ile veri alışverişinde kullanılır. İleri konular için Event Delegation, Drag-and-Drop ve modern frameworklerde olay durumu yönetimi (React, Vue) çalışılabilir. Farklı olay türlerini deneyin, event nesnesini keşfedin ve performans optimizasyonları uygulayın; tıpkı bir odayı dekore ederken her eşyanın yerini dikkatle seçmek gibi.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek