JavaScript Event Nedir? Click, Submit ve Mouse Olayları
Modern web siteleri, kullanıcıların gerçekleştirdiği işlemlere tepki verebilen dinamik yapılardan oluşur. Bir butona tıklamak, form göndermek, klavyeden tuşa basmak veya fareyi bir görselin üzerine getirmek web sayfalarında farklı işlemlerin başlamasını sağlayabilir. JavaScript'te bu etkileşimler event adı verilen olaylarla yönetilir.Event, tarayıcıda veya web sayfasında gerçekleşen ve JavaScript tarafından algılanabilen bir durumdur. Olaylar sayesinde kullanıcı hareketlerine göre fonksiyonlar çalıştırılabilir ve sayfanın davranışı değiştirilebilir.
JavaScript Event Nedir?
Event, web sayfasında gerçekleşen bir etkileşimi veya sistem olayını ifade eder. Bu olaylar kullanıcı tarafından başlatılabileceği gibi tarayıcı tarafından da oluşturulabilir.Örneğin kullanıcı bir butona tıkladığında click olayı meydana gelir. Bir form gönderildiğinde submit olayı gerçekleşir. Sayfanın yüklenmesi, pencerenin yeniden boyutlandırılması ve klavyeden tuşa basılması da farklı event türlerine örnektir.
JavaScript, bu olayları dinleyerek belirli işlemleri gerçekleştirebilir. Böylece kullanıcıların davranışlarına göre değişen arayüzler oluşturulabilir.
Event Listener Nedir?
Event Listener, belirli bir olay gerçekleştiğinde çalıştırılacak fonksiyonun bir HTML elementine bağlanmasını sağlar.AddEventListener metodu, modern JavaScript projelerinde olay yönetimi için en çok kullanılan yöntemlerden biridir. Bir elemente hangi olayın dinleneceği ve olay gerçekleştiğinde hangi işlemin yapılacağı bu yöntemle belirlenebilir.
Örneğin bir butona click listener eklendiğinde kullanıcı butona tıkladığı zaman ilgili fonksiyon çalışır. Bu fonksiyon bir mesaj gösterebilir, başka bir alanı görünür hale getirebilir veya sayfadaki bilgileri güncelleyebilir.
Click Olayı Nedir?
Click olayı, kullanıcının bir HTML elementine tıklamasıyla gerçekleşir. Butonlar, bağlantılar, kartlar ve çeşitli arayüz bileşenleri üzerinde kullanılabilir.Bir alışveriş sitesinde sepete ekle butonuna tıklandığında ürünün sepete dahil edilmesi click olayına örnektir. Benzer şekilde bir menü butonuna tıklanmasıyla açılır menünün görünür hale gelmesi de bu olay üzerinden yönetilebilir.
Click olayı yalnızca fare kullanımına bağlı düşünülmemelidir. Erişilebilir biçimde hazırlanmış etkileşimli elementler klavye üzerinden de kullanılabilir.
Submit Olayı Nedir?
Submit olayı, bir formun gönderilmesi sırasında gerçekleşir. Kullanıcı giriş formunu doldurduğunda, kayıt işlemi yaptığında veya arama formunu gönderdiğinde bu olay meydana gelebilir.JavaScript ile submit olayı dinlenerek form gönderilmeden önce gerekli kontroller yapılabilir. Örneğin zorunlu alanların doldurulup doldurulmadığı veya e-posta biçiminin uygun olup olmadığı incelenebilir.
Formun varsayılan gönderim davranışını durdurmak gerektiğinde event nesnesinin preventDefault metodu kullanılabilir. Böylece formun gönderimi JavaScript tarafından kontrol edilebilir.
Ancak istemci tarafında yapılan kontroller tek başına güvenlik sağlamaz. Önemli doğrulamaların sunucu tarafında da gerçekleştirilmesi gerekir.
Mouse Olayları Nelerdir?
Mouse eventleri, kullanıcının fareyle gerçekleştirdiği hareketleri algılamak için kullanılır.Mouseover, fare işaretçisinin bir elementin üzerine gelmesiyle gerçekleşir. Mouseout ise işaretçinin elementten ayrılması durumunda tetiklenir.
Mousedown, fare tuşuna basıldığında; mouseup ise tuş bırakıldığında gerçekleşir. Mousemove olayı, fare işaretçisi hareket ettikçe tetiklenebilir.
Bu olaylar görsel etkileşimler, sürükleme işlemleri, özel menüler ve oyun arayüzleri gibi alanlarda kullanılabilir.
Mouseover ile mouseenter, mouseout ile mouseleave arasında da davranış farklılıkları bulunur. Özellikle alt elementler üzerinden geçişlerde bu ayrım önem kazanır.
Keyboard Eventleri
JavaScript, klavye üzerinden gerçekleştirilen işlemleri de algılayabilir.Keydown olayı bir tuşa basıldığında gerçekleşir. Keyup ise tuş bırakıldığında tetiklenir. Keypress eski kullanımlarda karşılaşılan bir olaydır ancak güncel uygulamalarda genellikle keydown ve keyup tercih edilir.
Klavye olayları arama alanlarında, kısayol sistemlerinde, oyunlarda ve form kontrollerinde kullanılabilir.
Event nesnesi üzerinden hangi tuşa basıldığına ilişkin bilgiler alınabilir. Ancak klavye kısayolları hazırlanırken farklı işletim sistemleri ve erişilebilirlik ihtiyaçları dikkate alınmalıdır.
Event Object Nedir?
Bir olay gerçekleştiğinde JavaScript, ilgili olaya ait bilgileri içeren bir event nesnesi sunar.Bu nesne üzerinden olayın hangi elementte gerçekleştiği, hangi tuşun kullanıldığı veya fare işaretçisinin hangi konumda bulunduğu gibi bilgilere erişilebilir.
Target özelliği, olayın gerçekleştiği elementi temsil eder. CurrentTarget ise listener'ın bağlı olduğu elementi ifade eder. Bu iki özellik özellikle iç içe elementlerde olay yönetimi yapılırken önemlidir.
Event nesnesi, kullanıcı etkileşimlerini daha ayrıntılı biçimde kontrol etmeyi sağlar.
Event Bubbling Nedir?
Event bubbling, bir elementte gerçekleşen olayın DOM ağacı içerisinde üst elementlere doğru yayılmasıdır.Örneğin bir butonun bulunduğu kart alanına ve onun üstündeki kapsayıcıya da click listener eklenmişse, butona tıklanması sonucunda olay üst elementlere doğru ilerleyebilir.
Bu davranış bazı uygulamalarda faydalı olabilir. Ancak bir olayın yalnızca belirli elementte işlenmesi isteniyorsa event nesnesinin stopPropagation metodu kullanılabilir.
Event bubbling mantığını anlamak, özellikle karmaşık HTML yapılarında beklenmeyen tıklama davranışlarını önlemeye yardımcı olur.
Event Capturing Nedir?
Event capturing, olayların DOM ağacında üst seviyelerden hedef elemente doğru ilerlediği aşamadır.Tarayıcı olayları belirli bir akış içerisinde işler. Önce yakalama aşaması, ardından hedef aşaması ve son olarak yayılma aşaması gerçekleşir.
AddEventListener kullanılırken uygun seçeneklerle yakalama aşamasında dinleme yapılabilir. Bu özellik, özel olay yönetimi senaryolarında kullanılabilir.
Event Delegation Nedir?
Event delegation, birden fazla alt element için ayrı ayrı olay dinleyicisi oluşturmak yerine ortak bir üst element üzerinden olayları yönetme yaklaşımıdır.Örneğin yüzlerce üründen oluşan bir listede her ürün kartına ayrı click listener eklemek yerine liste kapsayıcısı üzerinden tıklamalar yönetilebilir.
Bu yaklaşım, özellikle dinamik olarak eklenen elementlerde faydalıdır. Sonradan oluşturulan alt elementler de üst elementteki olay dinleyicisi aracılığıyla kontrol edilebilir.
Event delegation, gereksiz listener sayısını azaltarak kodun daha düzenli hale gelmesini sağlayabilir.
PreventDefault ve StopPropagation Arasındaki Fark
PreventDefault, tarayıcının bir olay için gerçekleştireceği varsayılan davranışı engeller. Örneğin formun otomatik gönderilmesini veya bağlantının normal yönlendirme davranışını durdurmak için kullanılabilir.StopPropagation ise olayın DOM ağacında üst elementlere doğru yayılmasını engeller.
Bu iki yöntem farklı amaçlara sahiptir. Bir olayın varsayılan davranışını durdurmak ile olayın başka elementlere ulaşmasını engellemek aynı işlem değildir.
JavaScript Event Kullanım Alanları
Event yapıları, modern web sitelerinin hemen her bölümünde kullanılır. Formlar, açılır menüler, alışveriş sepetleri, görsel galeriler, bildirim sistemleri ve etkileşimli oyunlar olay yönetimiyle çalışabilir.JavaScript event mantığını öğrenmek, statik HTML sayfalarını dinamik uygulamalara dönüştürmek için önemlidir. Click, submit, mouse ve keyboard olaylarını doğru kullanmak daha kullanışlı ve etkileşimli web deneyimleri oluşturmayı sağlar.
