preventDefault
Bir olayın varsayılan davranışını engellemeyi (örneğin form submit) öğrenirsin.
preventDefault
Bazı olayların tarayıcı tarafından yerine getirilen varsayılan davranışları vardır. Bir bağlantıya tıklamak sayfayı yönlendirir, form gönderimi sayfayı yeniler. event.preventDefault() bu davranışı engeller.
link.addEventListener('click', (event) => {
event.preventDefault();
console.log('engellendi');
});Olay hâlâ kabarcıklanır; yalnızca tarayıcının varsayılan eylemi durdurulur. Yayılımı da durdurmak istersen ayrıca stopPropagation çağırırsın.
Form gönderimini engellemek
Form gönderiminde preventDefault çok kullanışlıdır. Sayfa yenilenmeden veriyi JavaScript ile işleyebilir, doğrulama yapabilir ve sonucu gösterebilirsin. Bu, modern tek sayfa uygulamalarının temelidir.
form.addEventListener('submit', (event) => {
event.preventDefault();
console.log('form işlendi');
});submit olayı forma eklenir, düğmeye değil. Bu şekilde Enter tuşuyla da gönderim yakalanır. Doğrulama başarısızsa preventDefault ile gönderimi durdurur, kullanıcıya uyarı gösterirsin.
Uygulama Form gönderiminde preventDefault çağır
form değişkenini tanımla ve #form öğesini seç. submit dinleyicisi ekle ve içinde event.preventDefault() çağırarak sayfa yenilenmesini engelle.
Örnek çözümü göster
const form = document.querySelector('#form');
form.addEventListener('submit', (event) => {
event.preventDefault();
console.log('form submitted');
});Kendini test et
-
event.preventDefault() ne zaman kullanılır?
form.addEventListener('submit', (event) => { event.preventDefault(); });- Yeni bir öğe oluştururken
- Dinleyici eklerken
- Varsayılan davranışı engellemek istediğinde
- Olay yayılımını durdurmak istediğinde
Cevabı göster
Varsayılan davranışı engellemek istediğinde — Doğru! preventDefault varsayılan davranışı engellemek için kullanılır.
-
Varsayılan davranışı engelle
form.addEventListener('submit', (event) => { event.____(); console.log('submitted'); });Cevabı göster
form.addEventListener('submit', (event) => { event.preventDefault(); console.log('submitted'); }); -
Olay ve davranışlarını eşleştir
- preventDefault
- Varsayılan davranışı engeller
- submit
- Form gönderimi
- click (bağlantı)
- Sayfa yönlendirme