addEventListener ve Olay Nesnesi
Olay dinleyicileri ekleyin, Event nesnesini alın, preventDefault ve stopPropagation kullanın ve olayların kabarcıklanmasını öğrenin.
addEventListener ve Olay Nesnesi, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Olaylar Nedir?
Olaylar, bir şey olduğunda tarayıcı tarafından tetiklenen sinyallerdir: kullanıcı tıklar, bir tuşa basar, fareyi hareket ettirir, sayfa yüklenir veya bir ağ isteği tamamlanır. JavaScript, olay dinleyicileri ekleyerek olaylara tepki verir.
addEventListener Sözdizimi
element.addEventListener(type, handler), olay tetiklendiğinde çalışacak bir işlev ekler. İşleyici, ne olduğuna ilişkin ayrıntıları içeren bir Event nesnesi alır.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});Yaygın Olay Türleri
Fare: click, dblclick, mouseenter, mouseleave, mousemove. Klavye: keydown, keyup, keypress. Form: submit, input, change, focus, blur. Belge: DOMContentLoaded, load. Pencere: resize, scroll.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));Olay Nesnesi
Her işleyici bir Event nesnesi alır. Önemli özellikler: e.target (olayı tetikleyen öğe), e.currentTarget (dinleyicinin bağlı olduğu öğe), e.type (olay adı), e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault(), tarayıcının varsayılan eylemini durdurur. Form gönderimini, bağlantı gezinmesini veya oyunlardaki sağ tıklama bağlam menülerini engellemek için kullanın.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation(), olayın DOM ağacında yukarı doğru yayılmasını durdurur. İçteki bir öğenin işleyicisi çalıştığında dıştaki öğenin işleyicisinin tetiklenmemesi gerektiğinde kullanın.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});Olay Kabarcıklanması
Olaylar yukarı doğru yayılır; hedefte tetiklendikten sonra üst öğede, ardından onun üst öğesinde ve en sonunda document üzerinde tetiklenir. Olay devretme bu şekilde çalışır: bir üst öğeye tek bir dinleyici ekleyin ve gerçek tıklanan alt öğeyi belirlemek için e.target kullanın.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});Olay Devretme Deseni
Olay devretme, dinleyicileri her alt öğeye ayrı ayrı eklemek yerine bir üst öğede dinleme uygulamasıdır. Daha verimlidir ve sonradan eklenen alt öğeleri otomatik olarak ele alır.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});Klavye Olayları
Klavye olayları, tuşlara basıldığında tetiklenir. Modern kodda e.key ('Enter', 'Escape' veya 'a' gibi bir dize) kullanın. Eski kodda, artık kullanımdan kaldırılmış olan e.keyCode kullanılırdı. e.metaKey, e.ctrlKey ve e.shiftKey değiştirici tuşları algılar.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});Olay Dinleyicilerini Kaldırma
Bir dinleyiciyi ayırmak için removeEventListener kullanın. İşleyici aynı işlev başvurusu olmalıdır; anonim işlevler kaldırılamaz. React/Vue'da genellikle bunu elle yönetmezsiniz.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);once Seçeneği
Dinleyiciyi bir kez çalıştıktan sonra otomatik olarak kaldırmak için üçüncü bağımsız değişken olarak { once: true } geçirin. Açılış ekranını bir kez kapatma gibi tek seferlik eylemler için kullanışlıdır.
document.querySelector('#start').addEventListener('click', startApp, { once: true });capture Seçeneği
Varsayılan olarak dinleyiciler kabarcıklanma aşamasında, yani yukarı doğru ilerlerken çalışır. Hedefin kendi dinleyicilerinden önce, aşağı doğru ilerleyen yakalama aşamasında çalışmaları için { capture: true } geçirin.
Hızlı Kontrol
Bir olay için tarayıcının varsayılan davranışı gerçekleştirmesini hangi yöntem durdurur?
Özet: DOM Olayları
Dinleyici eklemek için addEventListener(type, handler) kullanılır. Event nesnesi target, type ve denetim yöntemlerini sağlar. preventDefault() varsayılan davranışları engeller. stopPropagation() kabarcıklanmayı durdurur. Verimlilik ve dinamik alt öğeler için olay devretmeyi kullanın. Bellek sızıntılarını önlemek için dinleyicileri kaldırın.
Sıkça Sorulan Sorular
“addEventListener ve Olay Nesnesi” dersi ücretsiz mi?
Evet — “addEventListener ve Olay Nesnesi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“addEventListener ve Olay Nesnesi” dersinde ne öğreneceğim?
Olay dinleyicileri ekleyin, Event nesnesini alın, preventDefault ve stopPropagation kullanın ve olayların kabarcıklanmasını öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“addEventListener ve Olay Nesnesi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- querySelector ve querySelectorAll
- addEventListener ve Olay Nesnesi
- İçeriği Değiştirme: textContent innerHTML classList
- Öğe Oluşturma ve Ekleme