Merhaba Webkolog Takipçileri!
Web sayfalarımızı canlı ve etkileşimli kılan en temel mekanizmalardan biri JavaScript Olayları (Events)'dır. Kullanıcı bir butona tıkladığında, fareyi bir resmin üzerine getirdiğinde, klavyeden bir tuşa bastığında veya sayfa yüklendiğinde ya da kapanırken... İşte tüm bu anlar, JavaScript'in devreye girip belirli bir eylemi gerçekleştirmesi için birer "olay" görevi görür. Bu makalede, JavaScript olaylarının ne olduğunu, nasıl kullanıldığını ve web sitelerinize nasıl dinamizm katabileceğinizi ayrıntılı olarak inceleyeceğiz. Hazırsanız, olayların büyülü dünyasına adım atalım!
JavaScript Olayları Nedir?
Bir olay (event), web sayfasında meydana gelen herhangi bir etkileşim veya durum değişikliğidir. Bu olaylar, tarayıcı tarafından algılanır ve JavaScript kodumuzun bu olaylara tepki vermesini sağlar. JavaScript, HTML elementleri, tarayıcı penceresi ve belge üzerinde gerçekleşen birçok farklı türdeki olayı dinleyebilir ve bunlara yanıt verebilir.
Neden Olaylara İhtiyaç Duyarız?
Olaylar olmadan, web sayfalarımız statik olurdu. Kullanıcı girişini işleyemez, dinamik içerik güncelleyemez veya kullanıcının eylemlerine göre sayfa davranışını değiştiremezdik. Olaylar, web sayfalarımızı gerçek bir uygulama gibi çalıştıran anahtar mekanizmadır.
Yaygın Kullanılan JavaScript Olayları
İşte günlük geliştirmede sıkça karşımıza çıkan bazı önemli olaylar ve kısa açıklamaları:
- Kullanıcı Arayüzü (UI) Olayları:
onclick: Bir elemente tıklandığında.ondblclick: Bir elemente çift tıklandığında.onmouseover: Fare imleci bir elementin üzerine geldiğinde.onmouseout: Fare imleci bir elementin üzerinden ayrıldığında.onmousedown,onmouseup: Fare düğmesine basıldığında veya bırakıldığında.onmousemove: Fare imleci bir element üzerinde hareket ettiğinde.
- Klavye Olayları:
onkeydown: Bir tuşa basıldığında (tuş basılı tutulurken sürekli tetiklenir).onkeypress: Bir tuşa basıldığında ve karakter üretildiğinde.onkeyup: Bir tuş bırakıldığında.
- Form Olayları:
onfocus: Bir input veya form elemanı odaklandığında.onblur: Bir input veya form elemanı odaktan çıktığında.onchange: Bir input veya form elemanının değeri değiştiğinde (ve odaktan çıktığında).onsubmit: Bir form gönderildiğinde.onreset: Bir form sıfırlandığında.onselect: Bir metin alanı içindeki metin seçildiğinde.
- Yükleme/Pencere Olayları:
onload: Sayfa veya bir element (örn. resim) tamamen yüklendiğinde.onunload: Kullanıcı sayfadan ayrıldığında (sayfa kapanırken veya başka bir sayfaya giderken).onbeforeunload: Sayfadan ayrılmadan hemen önce (kullanıcıya onay sorusu göstermek için kullanılabilir).onresize: Tarayıcı penceresinin boyutu değiştiğinde.onscroll: Bir elementin veya sayfanın içeriği kaydırıldığında.
- Diğer Olaylar:
onerror: Bir JavaScript hatası oluştuğunda veya bir kaynak (resim, script vb.) yüklenemediğinde.ondragstart,ondrag,ondragend,ondrop,ondragover: Sürükle ve bırak işlemleriyle ilgili olaylar.
JavaScript Olaylarını Yakalama Yöntemleri
JavaScript'te olayları yakalamak için üç temel yöntem bulunur:
1. HTML Etiketinde Doğrudan Olay İşleyici Tanımlama (Inline Event Handlers)
Bu yöntem, olayı doğrudan HTML etiketinin bir niteliği olarak tanımlamanızı sağlar. Basit ve hızlıdır ancak JavaScript kodunu HTML ile karıştırdığı için genellikle tercih edilmez. Kod bakımı zorlaşabilir ve karmaşık projelerde yönetilmesi güç olabilir.
<button onclick="alert('Butona Tıklandı!')">Bana Tıkla</button>
<img src="resim.jpg" onerror="console.error('Resim yüklenemedi!')">
2. DOM Elemanına Atama Yöntemi (Traditional DOM Event Handlers)
Bu yöntemde, JavaScript kullanarak bir DOM elemanına doğrudan olay işleyici fonksiyonu atarsınız. Daha iyi bir ayrım sağlar ancak bir olay için yalnızca bir işleyici atayabilirsiniz. Eğer aynı olay için birden fazla işleyici atamaya çalışırsanız, son atanan işleyici önceki atamayı ezecektir.
// HTML: <button id="myButton">Tıkla Bana</button>
const myButton = document.getElementById('myButton');
// Birinci tıklama işleyicisi
myButton.onclick = function() {
console.log("Butona birinci kez tıklandı!");
};
// İkinci tıklama işleyicisi (Birincisini ezer!)
myButton.onclick = function() {
console.log("Butona ikinci kez tıklandı!");
};
// Sayfa yüklendiğinde çalışacak fonksiyon
window.onload = function() {
console.log("Sayfa tamamen yüklendi!");
};
3. Olay Dinleyicisi Ekleme Yöntemi (addEventListener())
Bu, olayları yakalamak için modern ve en çok tercih edilen yöntemdir. addEventListener() metodu, bir elemana birden fazla olay işleyicisi eklemenize olanak tanır ve olay fazları (kabarcıklanma ve yakalama) üzerinde daha fazla kontrol sağlar. Bu yöntem, kodun daha düzenli ve modüler olmasını sağlar.
Söz Dizimi: element.addEventListener(olayTipi, fonksiyon, [useCapture])
olayTipi: Olayın adı (örn. 'click', 'mouseover', 'keydown' - başında 'on' olmadan).fonksiyon: Olay tetiklendiğinde çalışacak fonksiyon.useCapture(isteğe bağlı): Bir boolean değerdir.trueise olay yakalama (capturing) fazında,falseise kabarcıklanma (bubbling) fazında tetiklenir (varsayılanfalse).
// HTML: <button id="myButtonModern">Modern Tıkla</button>
const myButtonModern = document.getElementById('myButtonModern');
// Birinci tıklama işleyicisi
myButtonModern.addEventListener('click', function() {
console.log("Modern butona ilk kez tıklandı!");
});
// İkinci tıklama işleyicisi (Öncekini ezmez, ikisi de çalışır!)
myButtonModern.addEventListener('click', function() {
console.log("Modern butona ikinci kez tıklandı!");
});
// Bir elementi fareyle terk ettiğinde
const myDiv = document.getElementById('myDiv'); // Varsayalım böyle bir div var
if (myDiv) {
myDiv.addEventListener('mouseout', () => {
console.log("Fare div'den ayrıldı.");
});
}
// Klavye olayını dinleme (tüm belge üzerinde)
document.addEventListener('keydown', (event) => {
console.log(`Tuşa basıldı: ${event.key} (Kod: ${event.keyCode})`);
if (event.key === 'Enter') {
alert("Enter tuşuna bastınız!");
}
});
// onbeforeunload örneği: Kullanıcı sayfadan ayrılmadan önce uyarı
window.addEventListener('beforeunload', (event) => {
// Bazı tarayıcılar (Chrome gibi) güvenlik nedeniyle özel bir mesaj göstermeye izin vermez.
// Sadece bir dönüş değeri ile uyarı kutusunun çıkmasını tetikleyebiliriz.
event.preventDefault(); // Varsayılan davranışı engelle
event.returnValue = ''; // Bazı tarayıcılarda bu gereklidir
// Konsola yazdırılan mesaj tarayıcıda görünmez. Tarayıcı kendi standart mesajını gösterir.
console.log("Sayfadan ayrılmaya çalışılıyor!");
});
Olay İşleyicisi Kaldırma (removeEventListener())
Daha önce eklediğiniz bir olay işleyicisini kaldırmak için removeEventListener() metodunu kullanabilirsiniz. Bu, özellikle tek seferlik olaylarda veya dinamik olarak eklenen/kaldırılan elemanlarda bellek sızıntılarını önlemek için önemlidir. Fonksiyonun referansının aynı olması gerektiğini unutmayın.
function tiklamaIsleyici() {
console.log("Bu fonksiyon çalıştı ve şimdi kaldırılacak.");
myButtonModern.removeEventListener('click', tiklamaIsleyici); // Kendini kaldırır
}
myButtonModern.addEventListener('click', tiklamaIsleyici);
Olay Akışı: Kabarcıklanma (Bubbling) ve Yakalama (Capturing)
Bir elementte bir olay tetiklendiğinde, bu olay DOM ağacında belirli bir yolla yayılır. Bu yayılmanın iki fazı vardır:
- Yakalama (Capturing) Fazı: Olay, en dıştaki (
windowveyadocument) elementten başlayarak, olay tetiklenen elemente doğru "aşağı" iner. Bu fazda bir olay dinleyici çalıştırılabilir. - Kabarcıklanma (Bubbling) Fazı: Olay, tetiklendiği elementten başlayarak, en dıştaki elemente doğru "yukarı" çıkar. Varsayılan olarak olaylar bu fazda işlenir.
addEventListener() metodunun üçüncü parametresi (useCapture) ile bu fazları kontrol edebilirsiniz:
element.addEventListener('click', func, true): Yakalama fazında çalışır.element.addEventListener('click', func, false)(varsayılan): Kabarcıklanma fazında çalışır.
<div id="parent" style="padding: 20px; background-color: lightblue;">
Parent Div
<button id="childButton">Child Button</button>
</div>
<script>
const parentDiv = document.getElementById('parent');
const childButton = document.getElementById('childButton');
// Kabarcıklanma (Bubbling) - Varsayılan
parentDiv.addEventListener('click', () => {
console.log('Parent Div - Bubbling');
}, false); // false veya hiç belirtilmezse bubbling
childButton.addEventListener('click', () => {
console.log('Child Button');
});
// Yakalama (Capturing)
parentDiv.addEventListener('click', () => {
console.log('Parent Div - Capturing');
}, true); // true ile capturing
</script>
Yukarıdaki örnekte, Child Button'a tıkladığınızda konsolda sırasıyla 'Parent Div - Capturing', 'Child Button' ve 'Parent Div - Bubbling' mesajlarını görürsünüz. Bu, olayın önce yakalama fazında üst elementten aşağı indiğini, sonra elementin kendisinde tetiklendiğini ve ardından kabarcıklanma fazında tekrar yukarı çıktığını gösterir.
Olay Nesnesi (Event Object)
Bir olay işleyici fonksiyonu tetiklendiğinde, fonksiyona otomatik olarak bir olay nesnesi (event object) geçirilir. Bu nesne, olay hakkında birçok faydalı bilgi içerir:
event.target: Olayın gerçekten hangi eleman üzerinde tetiklendiğini gösterir.event.currentTarget: Olay işleyicisinin eklendiği elemanı gösterir (delegasyonda farklılık gösterebilir).event.type: Olayın türünü (örn. 'click', 'mouseover') gösterir.event.preventDefault(): Olayın varsayılan davranışını engeller (örn. bir linke tıklanıldığında sayfaya gitmesini veya bir formun gönderilmesini engeller).event.stopPropagation(): Olayın DOM ağacında yukarı veya aşağı yayılmasını durdurur (kabarcıklanmayı veya yakalamayı engeller).- Fare olayları için:
event.clientX,event.clientY,event.screenX,event.screenY. - Klavye olayları için:
event.key,event.keyCode(eski),event.altKey,event.ctrlKey,event.shiftKey.
const linkElementi = document.getElementById('myLink'); // <a href="https://webkolog.net" id="myLink">Webkolog</a>
if (linkElementi) {
linkElementi.addEventListener('click', (event) => {
event.preventDefault(); // Linkin varsayılan davranışını (yeni sayfaya gitme) engeller
console.log("Linke tıklandı, ama sayfaya gidilmedi!");
console.log("Tıklanan Element:", event.target);
});
}
Bu sayede, form doğrulama (validation) yaparken, kullanıcı bir butona bastığında formun gönderilmesini engelleyebilir ve kendi doğrulama kodunuzu çalıştırabilirsiniz:
// HTML: <form id="validationForm">...</form>
const validationForm = document.getElementById('validationForm');
if (validationForm) {
validationForm.addEventListener('submit', (event) => {
// Basit bir doğrulama örneği
const username = document.getElementById('usernameInput').value;
if (username.length < 3) {
alert("Kullanıcı adı en az 3 karakter olmalıdır!");
event.preventDefault(); // Formun gönderilmesini engelle
}
});
}
Sonuç
JavaScript olayları, web sayfalarınızı interaktif ve kullanıcı dostu hale getirmenin temel direğidir. Kullanıcıların eylemlerine tepki verebilme, dinamik içerik güncellemeleri yapabilme ve hatta sayfa akışını kontrol edebilme yeteneği, modern web geliştirmede olmazsa olmazdır. addEventListener() metodunu kullanarak olayları doğru ve etkili bir şekilde yönetmeyi öğrenmek, daha sağlam ve bakımı kolay uygulamalar geliştirmenizi sağlayacaktır. Bol bol pratik yaparak ve farklı olay türlerini deneyerek bu alandaki ustalığınızı artırabilirsiniz. Unutmayın, her etkileşim bir olaydır ve her olay, sayfanızı daha da harika hale getirmek için bir fırsattır!
Webkolog'u takipte kalın!
Hepinize bol kodlu ve keyifli öğrenme süreçleri dilerim!
0 yorum:
Yorum Gönder