Geçenlerde internette gezinirken bir blog yazısı okuyordum, adamlar bir özellik eklemişler, üzerine gelince bilgi kartı çıkıyor, tıklayınca da detayları açılıyor. Aklıma takıldı, acaba ben bu işleri nasıl yapıyorum diye düşünürken, aslında ne kadar temel ama bir o kadar da önemli konulardan birine değineceğimi fark ettim. Biliyorsunuz, ben de 2000’lerin başından beri bu işlerin içindeyim, o zamanlar web siteleri çok daha basitti ama şimdiki etkileşimli dünya bambaşka. Hele o ilk zamanlarda, bir butona tıklayınca bir şeylerin olması ne kadar büyülüydü benim için, sanki sihirli bir değnek değiyormuş gibi 🙂
Bu arada, bu olaylar sadece kod yazanların bileceği teknik detaylar değil aslında. Hepimiz bir web sitesini kullanırken bu tür etkileşimlerle karşılaşıyoruz. Düşünsenize, bir sitede bir butona tıklıyorsunuz, bir şey açılıyor veya kapanıyor, ya da bir ürüne fareyi yaklaştırıyorsunuz ve animasyonlu bir şekilde detayları gösteriyor. İşte tüm bu sihrin arkasında yatan olaylar bütününe “event handling” yani olay yönetimi diyoruz.
Aslında bu işin özü çok basit. Bir kullanıcı bir eylem gerçekleştiriyor (fareye tıklamak, üzerine gelmek, bir tuşa basmak gibi) ve bizim yazdığımız kod da bu eylemi algılayıp ona göre bir tepki veriyor. Web geliştiriciliğinde bu tepkileri tanımlamak için kullandığımız temel olaylar var. En sık karşılaştıklarımızdan birkaçı da click (tıklama), dblclick (çift tıklama) ve hover (fare üzerine gelme). Bunlar sayesinde kullanıcılarımızın sitede yapmak istediği şeyleri daha kolay ve keyifli hale getiriyoruz. Mesela, bir ürün resminin üzerine geldiğinizde daha büyük bir önizleme çıkması harika bir deneyim sunar, değil mi?
Şimdi gelelim bu olayların teknik kısmına birazcık. Javascript ile bu olayları yakalamak ve yönlendirmek oldukça kolay. Genellikle bir HTML elementine bir event listener ekleyerek başlıyoruz. Bu listener, o element üzerinde belirli bir olay gerçekleştiğinde tetikleniyor ve bizim belirlediğimiz bir fonksiyonu çalıştırıyor. Mesela, bir butona tıklama olayını yakalamak için şöyle bir şey yaparız:
“`javascript // BUTONA TIKLAMA OLAYINI YAKALAMA
const myButton = document.getElementById(‘myButton’);
myButton.addEventListener(‘click’, function() { alert(‘Butona tıkladın! Tebrikler!’); });
“`
Bu kodda, ‘myButton’ ID’sine sahip bir element buluyoruz ve üzerine bir ‘click’ event listener ekliyoruz. Tıklandığında da basit bir uyarı mesajı gösteriyoruz. İşte bu kadar basit. Sanki bir kapı zilini çalmak gibi, zile basınca (olay) birinin kapıyı açması (tepki) gibi düşünebilirsiniz.
Peki ya çift tıklama? O da aynı mantıkla çalışıyor ama event listener’ın adını ‘dblclick’ olarak değiştiriyoruz. Bu genelde bir şeyi onaylamak veya bir işlemi daha belirgin hale getirmek için kullanılır. Mesela, bir dosyayı çift tıklayarak açarsınız ya da bir uygulamayı çift tıklayarak başlatırsınız, işte o mantık. Bazen de bir şeyi yanlışlıkla tıklamayı önlemek için çift tıklama isteyebiliriz, hani böyle önemli bir işlemi yapmadan önce iki kere düşünmemizi sağlamak gibi.
Gelelim benim en sevdiğim ama bazen de başıma bela açabilen ‘hover’ olayına. Bu, fare imleci bir elementin üzerine geldiğinde tetikleniyor. Genellikle menülerin açılması, bilgi balonlarının belirmesi veya butonların renk değiştirmesi gibi görsel efektler için kullanırız. Ama dikkat etmek lazım, eğer hover efekti çok uzun sürerse veya kullanıcı fareyi çektiğinde hemen kaybolmazsa, bu sefer de kullanıcıyı sinir edebiliyor. Sanki birisi sürekli gözünüzün önünde bir şeyler sallıyormuş gibi bir his verebilir 🙂
Bu hover olayını da şöyle bir örnekle açıklayabiliriz:
“`javascript // FARE İLE BİR ELEMENTİN ÜZERİNE GELİNCE
const infoBox = document.getElementById(‘infoBox’);
infoBox.addEventListener(‘mouseover’, function() { // bilgi kutusunu göster this.style.display = ‘block’; });
infoBox.addEventListener(‘mouseout’, function() { // fare çekilince bilgi kutusunu gizle this.style.display = ‘none’; });
“`
Burada hem ‘mouseover’ (fare üzerine gelince) hem de ‘mouseout’ (fare çekilince) olaylarını kullanarak bilgi kutusunu kontrol ediyoruz. Bu arada, bazen ‘mouseenter’ ve ‘mouseleave’ gibi benzer ama biraz daha farklı çalışan olaylar da var. Genelde ‘mouseover’ ve ‘mouseout’ daha çok tercih edilir ama detayına inersek aralarındaki farklar da önemli olabiliyor.
Neticede, bu üç olay türü (click, dblclick, hover) web sitelerinin interaktif olmasını sağlayan temel yapı taşlarından. Bunları doğru kullanmak, kullanıcı deneyimini inanılmaz derecede iyileştirir. Bir sitede gezinirken her şeyin yerinde ve tam zamanında olduğunu hissetmek harika bir şey. Sanki site sizin ne istediğinizi biliyor ve ona göre davranıyor gibi. Bu da o siteyi tekrar ziyaret etme isteğinizi artırır, değil mi?
Tabi, bunları yaparken performans meselesini de unutmamak lazım. Çok fazla olay dinleyicisi eklemek veya olaylar tetiklendiğinde çok ağır işlemler yapmak sitenin yavaşlamasına neden olabilir. Bu yüzden, optimizasyon da işin önemli bir parçası. Mesela, birden fazla butona aynı işlevi yaptırmak yerine, tek bir ortak elemana listener ekleyip, olayın hangi butondan geldiğini tespit etmek gibi teknikler kullanabiliriz. Bu, hem kodu daha temiz tutar hem de performansı olumlu etkiler.
Aslında bu olayların sadece front-end tarafında değil, back-end tarafında da karşılığı var. Tabii isimleri farklı olabilir ama temel mantık aynı. Bir istek geldiğinde (olay) sunucu bir tepki veriyor. Mesela, bir kullanıcı bir butona tıklayıp bir form gönderdiğinde, bu istek back-end’e düşüyor ve orada işleniyor. Vue.js’ten C# REST API’ye veri gönderme süreci de aslında bu olay yönetimi prensibinin bir yansıması. O tıklama olayı bir tetikleyici oluyor, veriler paketlenip API’ye gönderiliyor, orada işleniyor ve bir sonuç dönüyor.
Bu arada, ben de geçenlerde bir proje üzerinde çalışırken şöyle bir durumla karşılaştım. Bir kullanıcı profiline resim yükleme özelliği yapıyorduk. Normalde bir ‘change’ olayıyla resmi yakalayıp hemen işliyordum ama bir baktım ki, kullanıcı resmi seçtikten sonra vazgeçip başka bir resim seçtiğinde, ilk seçtiği resim hala hafızada kalıyor ve bazen garip hatalara yol açabiliyordu. Neyse ki, olayın tetiklenme sırasını ve seçilen dosyayı daha detaylı kontrol ederek bu sorunu çözdüm. Kendi programım sınıfta kaldı diyemem ama ufak bir “aha!” anı yaşadım diyebilirim 🙂
Sonuç olarak, web sitelerinde veya uygulamalarda kullanıcıyla etkileşim kurmanın temelinde bu olay yönetimi yatıyor. Click, dblclick, hover gibi basit olaylar bile, doğru kullanıldığında kullanıcı deneyimini bambaşka bir seviyeye taşıyabilir. Bu yüzden, bu temel olayları iyi anlamak ve etkili bir şekilde kullanmak, her web geliştiricisi için olmazsa olmazlardan bence. Hatta merak edenler için, bu konuda Google’da bolca kaynak bulabilirsiniz, ben de ara sıra göz atarım.