Bu aralar evde sürekli bir tamirat havası var. Geçen gün mutfak musluğunu değiştirmeye kalktım. Dedim ki ‘Bu çok basit bir şey, kendim hallederim’. Tabii ki yanılmışım. Musluk soketi biraz paslanmış, bir de anahtarın ucu sıyırdı. Sonuç mu? Yarım saatlik iş yarım gün sürdü, üstüne bir de elimi incittim. Neyse efendim, bu da benim ‘teknik fail’ hikayem olsun 🙂
Aslında konumuz bu değil tabii ama hani insan bazen böyle anılarla konuya giriyor ya, bende de durum öyle oldu. Form olaylarına dalarken, o an aklıma geldi bu musluk macerası. Web geliştirirken de bazen işler beklediğimiz gibi gitmeyebiliyor. İşte tam da bu yüzden, web formlarıyla etkileşim kurarken olayları (events) anlamak çok önemli. Özellikle de ‘submit’, ‘change’, ‘focus’ ve ‘blur’ gibi temel olayları bilmek, kullanıcı deneyimini bambaşka bir seviyeye taşıyor, bana göre.
Şimdi düşününce, bu olaylar aslında hayatımızın her alanında var. Hani markete gidip bir ürün beğenirsin ya, eline alırsın, incelersin. İşte o inceleme süreci biraz ‘focus’ gibi. Sonra ‘Bunu alıyorum!’ deyip kasaya gittiğinde o ‘submit’ oluyor. Sonra eve gelince ‘Acaba doğru mu aldım?’ diye düşünürsün, o da hafif bir ‘blur’ etkisi yaratır belki de. Bu arada, bu analojiler hep benim kafamda dönüyor, ne yapayım 🙂
Web dünyasında bu olaylar, kullanıcı bir formla etkileşim kurduğunda tetikleniyor. Düşünsenize, bir web sitesine giriyorsunuz ve bir kayıt formu var. O kutucuklara tıklayıp bir şeyler yazdıkça bir sürü şey oluyor arka planda. İşte bu ‘arka plan’ stuff’ını daha iyi anlamak için bu olayları birer birer inceleyelim diyorum.
Submit Olayı: Formun Son Sözü
Form olaylarının en bilindiklerinden biri ‘submit’. Bu olay, kullanıcının form üzerindeki ‘Gönder’ (Submit) butonuna tıkladığında veya Enter tuşuna bastığında tetikleniyor. Aslında formun nihai kararı gibi düşünebiliriz. Kullanıcı tüm bilgileri doldurdu, son bir kez ‘Tamamdır!’ deyip gönderiyor. İşte o an ‘submit’ olayı devreye giriyor.
Bu olayı yakalayıp, formun gönderilmesini durdurabilir veya verileri bir yere göndermeden önce son bir kontrol yapabilirsiniz. Mesela, şifreler uyuşmuyor mu? Email formatı doğru mu? İşte tam bu gibi durumlarda ‘submit’ olayını yakalayıp, kullanıcının ekranında bir uyarı verebilir, formu göndermeden önce gerekli düzeltmeleri yapmasını sağlayabilirsiniz. İnanın ki bu, kullanıcıyı gereksiz yere bekletmekten veya hata mesajlarıyla boğuşmaktan kurtarır.
Bu arada, JavaScript’te bu olayı yakalamak için `addEventListener(‘submit’, function(event) { … })` gibi bir yöntem kullanıyoruz. Ve eğer formun varsayılan olarak gönderilmesini engellemek istiyorsak, event objesinin `preventDefault()` metodunu çağırıyoruz. Bu, benim en çok kullandığım triklerden biri. Kendi programlarımda da bazen unutuyorum ama sonra ‘Aaa, neden kapanıyor program?’ diye bakıyorum, meğer submit’i engellemeyi unutmuşum 🙂
Change Olayı: Bir Şeyler Değiştiğinde
Şimdi gelelim ‘change’ olayına. Bu olay, bir input alanının (text, checkbox, select gibi) değeri değiştiğinde tetikleniyor. Mesela, bir metin kutusuna yazı yazdınız, bir dropdown’dan farklı bir seçenek seçtiniz veya bir checkbox’ı işaretlediniz. İşte o anda ‘change’ olayı çalışır.
Bu olay, gerçek zamanlı geri bildirim sağlamak için harika bir araç. Diyelim ki bir kullanıcı bir ülkeyi seçti. ‘change’ olayını kullanarak, seçilen ülkeye göre şehirler listesini otomatik olarak güncelleyebilirsiniz. Ya da bir ürün fiyatını değiştiren bir input alanı varsa, ‘change’ olayını kullanarak toplam fiyatı anında hesaplayıp gösterebilirsiniz. Bu, kullanıcıya ‘Bekle, biz hallediyoruz’ demek yerine, ‘Bakın, hemen güncellendi!’ demenin en şık yolu.
Sanırım bu ‘change’ olayı, kullanıcı etkileşimini daha dinamik hale getiriyor. Bazen de kullanıcı bir şey yazıp silince bile tetiklenebiliyor, bu da bazen can sıkıcı olabiliyor ama genel olarak çok kullanışlı. Gerçi, tam ne zaman tetikleneceği konusunda küçük nüanslar var, ama temel mantık bu. Yani bir değer değişti mi, ‘change’ orada.
Focus ve Blur Olayları: Neredesin ve Nereye Gidiyorsun?
Bu ikili, aslında birbirinin zıttı gibi düşünebilirsiniz. ‘Focus’ olayı, bir element (genellikle bir input alanı) aktif olduğunda, yani kullanıcı ona tıkladığında veya sekme tuşuyla oraya geldiğinde tetiklenir. ‘Blur’ olayı ise tam tersi, o elementten odak kaybolduğunda, yani kullanıcı başka bir yere tıkladığında veya sekme tuşuyla başka bir alana geçtiğinde tetiklenir.
Bu olaylar, kullanıcıya ipucu vermek veya hata kontrolleri yapmak için çok kullanışlı. Mesela, bir input alanına odaklandığında (focus), o alanın ne için olduğunu belirten küçük bir açıklama gösterebilirsiniz. Ya da kullanıcı o alandan çıktığında (blur), girdiğiniz bilginin doğru olup olmadığını hemen kontrol edebilirsiniz. Kendi programımda da bazen unutuyorum ama sonra ‘Aaa, şifre alanına tıklayınca niye bir şey olmuyor?’ diye bakıyorum, meğer focus olayını eklememişim. Ne komik değil mi?
Bu arada, ‘focus’ ve ‘blur’ olayları, kullanıcı deneyimini geliştirmek için birebir. Mesela, bir formda zorunlu alanları belirginleştirmek için ‘focus’ olduğunda kenarlığı renklendirebilir, ‘blur’ olduğunda ise eğer alan boşsa kırmızı bir çerçeve çizebilirsiniz. Bu, kullanıcıya görsel bir rehberlik sağlar. Google’da bir şey aratırken, o arama kutusuna tıkladığınızda çıkan öneriler de bir tür ‘focus’ mantığıyla çalışıyor sanırım. Ne güzel değil mi?
Şimdi bu olayları bir arada düşünelim. Bir form dolduruyorsunuz. Bir input’a tıkladınız (‘focus’ tetiklendi), bir şeyler yazdınız, belki yanlış yazdınız. Başka bir input’a geçtiniz (‘blur’ tetiklendi, belki bir hata mesajı çıktı). Listeden bir şey seçtiniz (‘change’ tetiklendi). Sonunda ‘Gönder’ dediniz (‘submit’ tetiklendi).
İşte tüm bu olaylar, web sitelerinin interaktif olmasını sağlıyor. Bunları doğru kullanmak, kullanıcıların sitenizde daha rahat gezmesini ve istediklerini daha kolay yapmasını sağlar. Benim gibi acemi geliştiriciler için başlangıçta biraz kafa karıştırıcı olabilir ama pratik yaptıkça oturuyor.
Kod Örneği: Bir Adım Önce, Bir Adım Sonra
Şimdi lafı daha fazla uzatmadan, bu olayları nasıl kullanabileceğimize dair basit bir örnek yapalım. Diyelim ki bir kullanıcı adı girişi var ve bu alan focus olduğunda bir çerçeve rengi değişsin, blur olduğunda ise eğer boşsa bir uyarı versin. En son da ‘Gönder’ butonuna basınca bir mesaj görelim.
İlk başta şöyle bir şey yapabiliriz, ama bu tam istediğimiz gibi çalışmayabilir:
// YANLIŞ BAŞLANGIÇ GİRİŞİMİ (Hata Ayıklama Gerekir) const userNameInput = document.getElementById('username'); const form = document.getElementById('myForm');userNameInput.addEventListener('focus', function() { userNameInput.style.borderColor = 'blue'; // Focus olduğunda mavi yap });
// Bu kısım biraz sorunlu olabilir, boşsa uyarı vermek için userNameInput.addEventListener('blur', function() { if (userNameInput.value === '') { userNameInput.style.borderColor = 'red'; // Boşsa kırmızı yap } else { userNameInput.style.borderColor = ''; // Normal renge dön } });
form.addEventListener('submit', function(event) { if (userNameInput.value === '') { alert('Kullanıcı adı boş olamaz!'); event.preventDefault(); // Göndermeyi engelle } else { alert('Form gönderiliyor!'); // Aslında burada veriyi göndermemiz lazım ama şimdilik alert yeter } });
Şimdi yukarıdaki kodda küçük bir sorun var. ‘Blur’ olayında, eğer kullanıcı bir şeyler yazıp sonra sildiğinde kenarlık kırmızı kalmaya devam edebilir. Bir de submit olayında, eğer kullanıcı adı doluysa bile ‘Form gönderiliyor!’ alerti çıkıyor ama gerçekte form gönderilmiyor, çünkü `preventDefault()` her zaman çağrılıyor gibi. Bu yüzden daha doğru bir yaklaşım izleyelim.
İşte daha sağlam bir yaklaşım:
// DOĞRU YAKLAŞIM (Olayları Daha İyi Yönetme) const userNameInput = document.getElementById('username'); const form = document.getElementById('myForm');// Focus olayı: Kenarlığı mavi yap userNameInput.addEventListener('focus', function() { userNameInput.style.borderColor = 'blue'; });
// Blur olayı: Değeri kontrol et, ona göre kenarlığı ayarla userNameInput.addEventListener('blur', function() { if (userNameInput.value.trim() === '') { // .trim() ile boşlukları da temizle userNameInput.style.borderColor = 'red'; userNameInput.setCustomValidity('Kullanıcı adı boş olamaz!'); // Tarayıcının kendi hata mesajını kullan } else { userNameInput.style.borderColor = 'green'; // Doğru doluysa yeşil yapalım userNameInput.setCustomValidity(''); // Hata yoksa temizle } });
// Change olayı: input değeri değiştikçe kenarlığı kontrol et (isteğe bağlı, blur ile çakışabilir ama göstereyim) userNameInput.addEventListener('change', function() { if (userNameInput.value.trim() === '') { userNameInput.style.borderColor = 'red'; } else { userNameInput.style.borderColor = 'green'; } });
// Submit olayı: Formu göndermeden önce son kontroller form.addEventListener('submit', function(event) { if (userNameInput.value.trim() === '') { alert('Kullanıcı adı boş olamaz!'); // Kullanıcıya bilgi ver event.preventDefault(); // Formun gönderilmesini engelle } else { // Gerçekte burada veriyi API'ye gönderme işlemleri yapılır. // Örneğin fetch API ile: // fetch('/api/kullanici', { method: 'POST', body: JSON.stringify({ username: userNameInput.value }) }) // .then(response => response.json()) // .then(data => console.log('Başarılı:', data)) // .catch((error) => console.error('Hata:', error));
alert('Form gönderiliyor!'); // Şimdilik sadece alert // Gerçek uygulamada burası default göndermeyi engellemez, fetch ile veri gönderilir. // event.preventDefault(); // Bu satırı kaldırırsak form submit olur. } });
Bakın şimdi, ikinci örnekte hem `trim()` fonksiyonuyla boşlukları temizledik hem de tarayıcının kendi `setCustomValidity` özelliğini kullandık. Bu, daha standart bir hata gösterme yöntemi. ‘change’ olayını da ekledim ama bu durumda ‘blur’ ile biraz çakışabilir, yine de nasıl kullanıldığını görün istedim. Gerçek bir uygulamada, bu tür detaylar için daha kapsamlı bir form doğrulama kütüphanesi kullanmak daha mantıklı olabilir. Mesela Google’da aratırsan birçok seçenek bulursun.
Neticede, ‘submit’, ‘change’, ‘focus’ ve ‘blur’ olayları, web formlarıyla etkileşim kurmanın temel taşları. Bunları doğru kullanarak, kullanıcı dostu ve etkili web uygulamaları geliştirebiliriz. Kendi web projelerimde de bu olayları bol bol kullanıyorum ve gerçekten işleri çok kolaylaştırıyor. Hani bazen unutuyorum ama sonra hatırlayınca ‘iyi ki de yapmışım’ diyorum 🙂