JavaScript preventDefault nedir?

Mehmet · Dün 21:14 da

JavaScript preventDefault nedir?

event.preventDefault(), tarayıcının bir olay için varsayılan davranışını iptal eden JavaScript yöntemidir. Örneğin bir formun gönderilmesini, bir bağlantının başka sayfaya gitmesini veya sürüklenen bir öğenin tarayıcının varsayılan işlemine bırakılmasını engelleyebilir. Yöntem yalnızca olay iptal edilebilirse etkili olur; olayın JavaScript dinleyicilerinin diğerlerine ulaşmasını durdurmaz.

Nasıl çalışır?

Tarayıcı bir olay meydana geldiğinde önce o olay için yerleşik bir davranış planlar. Form gönderiminde sayfayı yenilemek, bağlantı tıklamasında hedefe gitmek ve bazı fare olaylarında tarayıcı işlemlerini sürdürmek buna örnektir. Olay dinleyicisi içinde event.preventDefault() çağrılırsa bu varsayılan işlem iptal edilir.

Bu yöntem, olayın yayılmasını durdurmaz. Yani aynı olay üst öğelere ulaşmaya devam edebilir. Yayılmayı durdurmak gerekiyorsa ayrı bir işlem olan event.stopPropagation() değerlendirilir. İki yöntemi aynı amaç sanmak, özellikle olay devretme (event delegation) kullanılan kodlarda hatalı sonuçlara yol açar.

Çalışan en küçük örnek: form gönderimini kontrol etmek

Aşağıdaki dosyayı index.html adıyla kaydedip tarayıcıda açın. Tarayıcının yerleşik e-posta doğrulaması geçince normal gönderim iptal edilir ve yalnız yerel sonuç metni gösterilir. Bu örnek sunucuya veri göndermez veya üyelik oluşturmaz.

Kod:

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>preventDefault örneği</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>input, button { border-radius: 4px; }</style>
</head>
<body>
  <form id="signup-form">
    <label>
      E-posta:
      <input id="email" type="email" required>
    </label>
    <button type="submit">Gönder</button>
  </form>
  <p id="result" role="status"></p>

  <script>
    const form = document.querySelector('#signup-form');
    const email = document.querySelector('#email');
    const result = document.querySelector('#result');

    form.addEventListener('submit', function (event) {
      event.preventDefault();

      result.textContent = `Yerel demo: ${email.value}`;
    });
  </script>
</body>
</html>

Beklenen sonuç, form gönderildiğinde sayfanın yenilenmemesi ve result paragrafında girilen e-posta adresinin görünmesidir. Sayfa yenileniyorsa dinleyicinin gerçekten submit olayına bağlandığını ve preventDefault() çağrısının olay işleyicisi içinde çalıştığını kontrol edin. required gibi yerleşik doğrulama alanları geçersizse tarayıcı submit olayını çalıştırmadan önce kullanıcıdan alanı düzeltmesini isteyebilir.

Hangi durumda kullanılmalı?

preventDefault() kullanmadan önce tarayıcının davranışını gerçekten değiştirmek istediğinizden emin olun. Yaygın kararlar şöyledir:

İhtiyaç	Olay	Kullanım amacı
Özel form doğrulaması veya AJAX gönderimi	`submit`	Sayfanın normal form gönderimini durdurup kendi işlemini yapmak
Bağlantıyı yalnızca belirli koşullarda çalıştırmak	`click`	Hedef sayfaya gitmeyi koşula bağlamak
Özel sürükle-bırak davranışı	Fare veya sürükleme olayları	Tarayıcının varsayılan sürükleme işlemini engellemek
Özel klavye kısayolu	`keydown`	Bir tuşun tarayıcıdaki varsayılan etkisini değiştirmek

Aşağıdaki ayrı parçada HTML içinde id="details-link" olan bir bağlantı bulunduğu varsayılır; yoksa seçici null döner ve dinleyici bağlanamaz. Sahte oturum koşulu yalnız olay davranışını gösterir; gerçek yetki denetimi sunucuda yapılmalıdır:

Kod:

document.querySelector('#details-link').addEventListener('click', function (event) {
  const isLoggedIn = false;

  if (!isLoggedIn) {
    event.preventDefault();
    console.log('Önce oturum açılmalı.');
  }
});

Buradaki önemli nokta, preventDefault() çağrısının koşulun dışına konulmamasıdır. Aksi durumda oturum açmış kullanıcı da bağlantının hedef sayfasına gidemez.

Sık yapılan hatalar

Yanlış olayı dinlemek: Form gönderimindeki varsayılan davranışı engellemek için genellikle düğmenin click olayını değil, formun submit olayını dinlemek daha doğrudur. Böylece kullanıcı gönderimi klavyeyle yaptığında da aynı mantık çalışır.
Her durumda iptal etmek: Kullanıcının beklediği gezinme, gönderim veya klavye davranışını gereksiz yere engellemek kullanılabilirliği bozar. İptali yalnızca gerçek koşul oluştuğunda yapın.
Yayılmayı durdurduğunu sanmak: preventDefault() üst öğelerdeki dinleyicilerin çalışmasını engellemez. Bunun amacı varsayılan tarayıcı davranışıdır; olay akışını yönetmek farklı bir konudur.
İptal edilemeyen olayda sonuç beklemek: Bazı olaylar iptal edilebilir değildir. Böyle bir durumda event.cancelable değeri false olabilir ve çağrı varsayılan davranışı değiştirmez.
Asenkron işlemden sonra çağırmak: Varsayılan davranışın zamanında iptal edilmesi gerektiğinden await sonrasında yapılan çağrı güvenilir değildir. Gerekirse yöntemi dinleyicinin başında çağırıp işlemin sonucunu daha sonra yönetin.

Sonraki adım, iptal edilen davranışın yerine ne konacağını açıkça belirlemektir. Formu AJAX ile gönderecekseniz doğrulama, istek gönderme, hata gösterme ve başarı durumunu ayrıca uygulayın; yalnızca preventDefault() çağırıp başka işlem yapmamak formu çalışmıyor gibi gösterir.

Sık sorulan sorular

Cancelable true iken kaydırma neden iptal edilmeyebilir?

Dinleyici passive olarak kaydedildiyse preventDefault etkili olmaz ve konsolda uyarı görülebilir. Kaydırmayı gerçekten iptal etmeniz gereken olayda dinleyici seçeneğini bilinçli belirleyin; gereksiz kaydırma engellemesi kullanılabilirliği bozabilir.

preventDefault() ile return false aynı şey midir?

Hayır. return false kullanılan bağlama göre farklı davranabilir ve modern addEventListener dinleyicilerinde varsayılan davranışı kendiliğinden iptal etmez. Açık ve anlaşılır çözüm, gerektiğinde doğrudan event.preventDefault() çağırmaktır.

JavaScript preventDefault nedir?

Mehmet