Form submit olayı
Formun submit olayını yakalayıp preventDefault ile sayfa yenilenmesini engellemeyi öğrenirsin.
submit olayı
Form gönderildiğinde submit olayı tetiklenir. Bu olayı yakalamak için addEventListener metoduna 'submit' türünü verirsin.
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
console.log('Gönderildi');
});Dinleyiciyi düğmeye değil, forma eklersin. Form, Enter tuşu veya gönder düğmesiyle gönderilebilir; her iki durumda da submit olayı çalışır.
preventDefault ile yenilenmeyi engellemek
Submit olayı varsayılan olarak sayfayı yeniden yükler. Bunu engellemek için olay nesnesinin preventDefault metodunu çağırırsın.
form.addEventListener('submit', (event) => {
event.preventDefault();
console.log('Sayfa yenilenmedi');
});Bu satırı en başa yazmak en güvenlidir. Böylece form verisiyle JavaScript tarafında çalışabilir, sayfa yenilenmeden sonucu gösterebilirsin.
Uygulama Submit dinleyicisi ekle
form değişkeni bir <form> öğesini gösteriyor. submit olayını dinle, event.preventDefault() çağrısı ile sayfa yenilenmesini engelle ve konsola 'Gönderildi' yazdır.
Örnek çözümü göster
form.addEventListener('submit', (event) => {
event.preventDefault();
console.log('Gönderildi');
});Kendini test et
-
Hangisi form gönderimini yakalar?
const form = document.querySelector('form'); // A form.addEventListener('click', () => {}); // B form.addEventListener('submit', () => {}); // C form.addEventListener('send', () => {}); // D form.addEventListener('change', () => {});- A
- B
- C
- D
Cevabı göster
B — Doğru! submit olayı yalnızca form gönderildiğinde tetiklenir.
-
Terimleri anlamlarıyla eşleştir
- submit
- Form gönderim olayı
- preventDefault()
- Sayfa yenilenmesini engeller
- event
- Olay nesnesi
-
preventDefault çağrısını tamamla
form.addEventListener('submit', (event) => { event.____(); });Cevabı göster
form.addEventListener('submit', (event) => { event.preventDefault(); });