JavaScript'te this anahtar kelimesi birçok geliştiricinin kafasını karıştırır. Ancak event handler'larda kullanıldığında aslında oldukça mantıklı ve kullanışlıdır. Bu makalede, this kelimesinin event callback fonksiyonlarında nasıl çalıştığını öğreneceğiz ve bunu pratikte nasıl kullanabileceğimizi göreceğiz.
Event Handler'larda "this" Neyi İfade Eder?
Bir event handler callback fonksiyonu içinde this anahtar kelimesi, olayın tetiklendiği elementi ifade eder. Yani hangi elemente tıkladıysanız, hangi elementin üzerine fare ile geldiyseniz, this o elementi gösterir.
const buton = document.querySelector('#benimButon');
buton.addEventListener('click', function() {
console.log(this); // Tıklanan buton elementini gösterir
});Pratik Örnek: Çoklu Butonlar
Diyelim ki sayfada birden fazla renk değiştirme butonumuz var:
HTML
<button class="renk-btn">Kırmızı</button>
<button class="renk-btn">Mavi</button>
<button class="renk-btn">Yeşil</button>
<button class="renk-btn">Sarı</button>
<button class="renk-btn">Mor</button>JavaScript (this kullanmadan - Kötü Yöntem)
const butonlar = document.querySelectorAll('.renk-btn');
butonlar.forEach(function(buton) {
buton.addEventListener('click', function() {
// buton değişkenini kullanıyoruz
buton.style.backgroundColor = 'orange';
buton.style.color = 'white';
});
});JavaScript (this kullanarak - İyi Yöntem)
const butonlar = document.querySelectorAll('.renk-btn');
butonlar.forEach(function(buton) {
buton.addEventListener('click', function() {
// this kullanıyoruz
this.style.backgroundColor = 'orange';
this.style.color = 'white';
});
});Her iki yöntem de çalışır, ama this kullanmanın avantajını birazdan göreceğiz.
Neden "this" Kullanmalıyız?
Avantaj 1: Tekrar Kullanılabilir Fonksiyonlar
this kullanarak, aynı fonksiyonu birden fazla element için kullanabiliriz:
// Tek bir fonksiyon tanımlıyoruz
function vurgula() {
this.style.backgroundColor = '#f0f0f0';
this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
this.style.transform = 'scale(1.05)';
}
function vurguyuKaldir() {
this.style.backgroundColor = '';
this.style.boxShadow = '';
this.style.transform = '';
}
// Tüm kartlara uygulayalım
const kartlar = document.querySelectorAll('.urun-karti');
kartlar.forEach(function(kart) {
kart.addEventListener('mouseenter', vurgula);
kart.addEventListener('mouseleave', vurguyuKaldir);
});
// Tüm menü öğelerine de uygulayalım
const menuOgeleri = document.querySelectorAll('.menu-item');
menuOgeleri.forEach(function(oge) {
oge.addEventListener('mouseenter', vurgula);
oge.addEventListener('mouseleave', vurguyuKaldir);
});Gördüğünüz gibi, vurgula ve vurguyuKaldir fonksiyonlarını hem ürün kartlarına hem de menü öğelerine uyguladık. this sayesinde fonksiyon, hangi elemente uygulandıysa onu etkiliyor.
Avantaj 2: Daha Temiz Kod
// this kullanmadan
butonlar.forEach(function(buton) {
buton.addEventListener('click', function() {
buton.classList.toggle('aktif');
buton.textContent = buton.classList.contains('aktif') ? 'Açık' : 'Kapalı';
});
});
// this kullanarak
butonlar.forEach(function(buton) {
buton.addEventListener('click', function() {
this.classList.toggle('aktif');
this.textContent = this.classList.contains('aktif') ? 'Açık' : 'Kapalı';
});
});Gerçek Hayat Örneği: Renk Paleti Uygulaması
Kullanıcının tıkladığı rengi seçtiği bir renk paleti yapalım:
HTML
<div class="palet">
<div class="renk" style="background-color: #e74c3c;"></div>
<div class="renk" style="background-color: #3498db;"></div>
<div class="renk" style="background-color: #2ecc71;"></div>
<div class="renk" style="background-color: #f1c40f;"></div>
<div class="renk" style="background-color: #9b59b6;"></div>
<div class="renk" style="background-color: #1abc9c;"></div>
</div>
<div id="secilen-renk">Seçilen: Henüz seçilmedi</div>JavaScript
const renkKutulari = document.querySelectorAll('.renk');
const secilenRenkDiv = document.querySelector('#secilen-renk');
function renkSec() {
// Tüm kutulardan "secili" class'ını kaldır
renkKutulari.forEach(function(kutu) {
kutu.classList.remove('secili');
});
// Tıklanan kutuya "secili" class'ını ekle
this.classList.add('secili');
// Seçilen rengi göster
const renk = this.style.backgroundColor;
secilenRenkDiv.textContent = 'Seçilen: ' + renk;
secilenRenkDiv.style.backgroundColor = renk;
}
renkKutulari.forEach(function(kutu) {
kutu.addEventListener('click', renkSec);
});Gerçek Hayat Örneği: Akordeon Menü
Tıklanan bölümün açılıp kapandığı bir akordeon menü:
function akordeonToggle() {
// Tıklanan başlığın içerik kısmını bul
const icerik = this.nextElementSibling;
// Açık/kapalı durumunu değiştir
if (icerik.style.maxHeight) {
icerik.style.maxHeight = null;
this.classList.remove('aktif');
} else {
icerik.style.maxHeight = icerik.scrollHeight + 'px';
this.classList.add('aktif');
}
}
const akordeonBasliklari = document.querySelectorAll('.akordeon-baslik');
akordeonBasliklari.forEach(function(baslik) {
baslik.addEventListener('click', akordeonToggle);
});Gerçek Hayat Örneği: Yapılacaklar Listesi
Tıklanan görevin tamamlandı olarak işaretlenmesi:
function gorevToggle() {
this.classList.toggle('tamamlandi');
// Üzerini çiz veya çizgiyi kaldır
if (this.classList.contains('tamamlandi')) {
this.style.textDecoration = 'line-through';
this.style.opacity = '0.6';
} else {
this.style.textDecoration = 'none';
this.style.opacity = '1';
}
}
const gorevler = document.querySelectorAll('.gorev');
gorevler.forEach(function(gorev) {
gorev.addEventListener('click', gorevToggle);
});⚠️ Dikkat: Arrow Function'larda "this"
Arrow function'lar (ok fonksiyonları) kendi this değerini oluşturmaz. Bu yüzden event handler'larda arrow function kullanırken dikkatli olmalısınız:
// ❌ YANLIŞ - Arrow function this'i farklı yorumlar
buton.addEventListener('click', () => {
console.log(this); // Window objesini gösterir, butonu değil!
});
// ✅ DOĞRU - Normal function this'i doğru yorumlar
buton.addEventListener('click', function() {
console.log(this); // Buton elementini gösterir
});Alternatif: event.target Kullanımı
Arrow function kullanmak istiyorsanız, event.target veya event.currentTarget kullanabilirsiniz:
buton.addEventListener('click', (event) => {
console.log(event.target); // Tıklanan elementi gösterir
console.log(event.currentTarget); // Event listener'ın bağlı olduğu elementi gösterir
});this vs event.target vs event.currentTarget
| Özellik | Açıklama |
|---|---|
this | Event listener'ın bağlı olduğu element |
event.target | Olayı başlatan gerçek element |
event.currentTarget | Event listener'ın bağlı olduğu element (this ile aynı) |
// Örnek: Bir div içindeki butona tıklama
const container = document.querySelector('.container');
container.addEventListener('click', function(event) {
console.log('this:', this); // .container div
console.log('event.target:', event.target); // Tıklanan element (belki iç buton)
console.log('event.currentTarget:', event.currentTarget); // .container div
});Özet
Bu makalede öğrendiklerimiz:
✅ Event handler'larda this, olayın tetiklendiği elementi ifade eder
✅ this sayesinde tekrar kullanılabilir fonksiyonlar yazabiliriz
✅ Arrow function'lar this'i farklı yorumlar, dikkatli olun
✅ Alternatif olarak event.target veya event.currentTarget kullanılabilir
✅ this ve event.currentTarget genellikle aynı elementi gösterir
Bir sonraki makalede Keyboard Events (Klavye Olayları) ve Event Object (Olay Nesnesi) konularını inceleyeceğiz.
