Web sitelerinde interaktif öğelerle uğraşırken, klavyeden gelen sinyalleri yakalamak bazen hayat kurtarıcı olabiliyor, değil mi? Özellikle oyunlar, form doğrulama veya özel kısayol tuşları tanımlamak istediğimizde bu klavye olayları dediğimiz şeyler devreye giriyor. Hani bazen bir butona basınca bir şey olmasını beklersin ama klavyedeki ok tuşlarıyla da aynı şeyi yapabilsek harika olmaz mıydı? İşte tam bu noktada JavaScript’in bize sunduğu keypress, keydown ve keyup olayları devreye giriyor. Açıkçası bu üçü birbirine çok benziyor ama aralarında ince farklar var ve doğru anlamak işimizi çok kolaylaştırıyor.
Öncelikle keydown olayından başlayalım. Bu olay, siz bir tuşa basıp parmağınızı çekmeden hemen önce tetikleniyor. Yani tuşa ilk bastığınız anda. Bu, bir tuşa basıldığını anlamak için en erken tetiklenen olay diyebiliriz. Örneğin, bir oyun karakterini hareket ettirmek istediğinizde, ok tuşuna basar basmaz karakterin hareket etmeye başlaması için keydown ideal. Hatta bir tuşa basılı tuttuğunuzda bile bu olay tekrar tekrar tetiklenebilir, bu da karakterin sürekli ilerlemesi gibi durumlar için çok kullanışlı oluyor. Yani bir tuşa basıldığında o an ne olmasını istiyorsanız, ilk tetiklenen bu olayla halledebilirsiniz.
Sonra karşımıza keypress olayı çıkıyor. Bu olay da bir tuşa basıldığında tetikleniyor ama burada ufak bir ayrım var; keypress sadece “basılabilir” karakterler için çalışıyor. Ne demek bu? Yani harfler, rakamlar, semboller gibi ekrana bir çıktı veren tuşlar için bu olay tetikleniyor. Ama Shift, Ctrl, Alt, Arrow Keys (ok tuşları) gibi tuşlar için keypress olayı tetiklenmez. Bu biraz kafa karıştırıcı olabilir, değil mi? Aslında keypress olayı artık pek önerilmiyor, daha çok keydown ve keyup kullanılıyor bu yüzden. Tarayıcılar arasında da farklılıklar gösterebiliyor bu olay, o yüzden dikkatli olmak lazım.
Neticede, en çok kullanacağımız ve en mantıklısı da keyup olayı. Bu olay da adından anlaşılacağı gibi, bir tuşa basıp parmağınızı çektiğinizde tetikleniyor. Yani tuşa basma eyleminin bittiği an. Bu da şunu sağlıyor: Bir tuşa bastınız, bir şeyler oldu ve siz parmağınızı çektiğinizde işi bitiriyorsunuz. Mesela bir form alanına yazı yazarken, siz yazmayı bitirip tuşu bıraktığınızda bir doğrulama yapmak isteyebilirsiniz. Ya da bir oyunda bir tuşa basılı tutarak bir şeyi şarj ettiyseniz, parmağınızı çektiğinizde şarjın tamamlanıp ateş etmesi gibi. keyup olayı, tuş basılı tutulurken sürekli tetiklenmez, sadece tuşu bıraktığınızda bir kere çalışır. Bu da genellikle daha temiz bir kod yazmanızı sağlıyor.
Peki, bu üçünü nasıl kullanacağız? Hemen basit bir örnekle açıklayalım. Diyelim ki bir kutuya renk vermek istiyoruz ve klavyedeki ‘R’ tuşuna basınca kutuyu kırmızı, ‘G’ tuşuna basınca yeşil, ‘B’ tuşuna basınca da mavi yapmak istiyoruz. Bunu keydown ile yapabiliriz mesela, çünkü tuşa basar basmaz rengin değişmesini istiyoruz. Ama aynı zamanda eğer kullanıcı ‘R’ tuşuna basıp bırakırsa da rengin kırmızı olmasını istiyorsak, keyup de kullanabiliriz. İşte bu noktada hangisini kullanacağımız, ne istediğimize bağlı.
Şimdi gelelim koda. Bu üç olayı da bir elemente (mesela tüm sayfaya veya bir input alanına) bağlayabiliriz. Genellikle tüm sayfaya bağlamak daha mantıklı oluyor çünkü klavyedeki herhangi bir tuşa basıldığında olayı yakalamak isteyebiliriz. document.addEventListener() metodu bunun için biçilmiş kaftan. Bir de şöyle bir durum var; keydown ve keyup olayları size sadece hangi tuşa basıldığını değil, aynı zamanda Shift, Ctrl gibi modifier tuşların basılı olup olmadığını da söyler. Bu da işleri daha da kolaylaştırıyor, değil mi?
İşte size basit bir örnek kod. Bu kodda, tuşa basıldığında konsola o tuşun adını ve hangi olayın tetiklendiğini yazdıracağız. Böylece aradaki farkı daha net görebilirsiniz. Hatta, tuşa basılı tuttuğunuzda keydown‘ın nasıl tekrarlandığını ve keyup‘ın sadece bir kere çalıştığını da gözlemleyebilirsiniz. İnanın ki bu küçük denemeler konuyu anlamak için çok faydalı oluyor. Ben de ilk başlarda karıştırıyordum, ama bu şekilde deneyince kafamda oturdu.
Şimdi gelelim pratik kullanıma. Mesela bir formumuz var ve kullanıcı ‘Enter’ tuşuna basınca formun otomatik olarak gönderilmesini istiyoruz. Bunu keydown ile yapabiliriz. Kullanıcı ‘Enter’ tuşuna bastığı anda form submit olur. Ya da bir oyun hazırlıyorsunuz ve oyuncunun zıplaması için boşluk tuşuna basması gerekiyor. Boşluk tuşuna basıldığı anda zıplama animasyonunu başlatmak için keydown mükemmel bir seçim. Ama diyelim ki oyuncu tuşu bırakınca zıplamayı durdurmak istiyorsunuz, o zaman da keyup kullanabilirsiniz. Yani aslında ne istediğinize göre seçim yapıyorsunuz.
Bu arada, event.key özelliği bize basılan tuşun adını veriyor. Bu, string olarak ‘a’, ‘Enter’, ‘ArrowUp’ gibi değerler döndürüyor. Bir de event.keyCode vardı ama artık bu eski bir yöntem ve event.key daha güvenilir. Ama eski kodlarda karşınıza çıkabilir diye aklınızda bulunsun. event.shiftKey, event.ctrlKey, event.altKey gibi özelliklerle de modifier tuşların durumunu kontrol edebiliyorsunuz. Bu da özellikle karmaşık kısayollar tanımlarken çok işinize yarayacaktır, sanırım.
Bir de şöyle bir durum var: keypress olayı, input ve change olaylarıyla da bazen karışabiliyor. Ama keypress daha çok anlık tuş basımını yakalarken, input bir elementin değerinin değiştiğini, change ise o değişimin tamamlandığını belirtiyor. Yani aslında üçü de farklı amaçlara hizmet ediyor. Hani bazen bir sitede bir input alanına bir şey yazmaya başlarsınız ve anında aşağıda uyarılar çıkar ya, işte orada genellikle input veya keydown olayları kullanılıyor. Ama kullanıcı yazmayı bitirip başka yere tıklayınca çıkan uyarılar için change daha mantıklı olabiliyor.
Şimdi size daha detaylı bir örnek vereyim. Diyelim ki bir metin kutumuz var ve bu metin kutusuna maksimum 100 karakter girebiliyoruz. Kullanıcı 100 karakteri geçtiğinde, daha fazla yazı yazmasını engellemek istiyoruz. Bu durumda keydown olayını kullanmak en mantıklısı, çünkü karakter sınırı aşılmadan müdahale edebiliyoruz. Eğer keyup kullanırsak, kullanıcı karakteri yazıp bırakacak, sonra biz onu keseceğiz. Bu da biraz geç kalmış bir müdahale olur, değil mi? Yani bu yüzden olayların tetiklenme zamanlaması çok önemli.
Bir de şöyle bir düşünce var aklımda, acaba bu olayları farklı elementlere de bağlayabilir miyiz? Mesela sadece bir butona basıldığında mı olmalı yoksa tüm sayfada mı? Evet, bunu yapabiliriz. document.addEventListener ile tüm sayfayı dinleyebileceğimiz gibi, belirli bir div veya button elementine de addEventListener ile bu olayları bağlayabiliriz. Bu da kodumuzun daha spesifik olmasını sağlar ve gereksiz yere her tuş basımını dinlememiş oluruz. Mesela sadece bir oyun penceresi içindeyken klavye olaylarını dinlemek isteyebilirsiniz. Bu durumda oyun penceresinin referansını alıp ona bağlayabilirsiniz.
Sonuç olarak, keydown, keypress ve keyup olayları web geliştirmede klavyeyle etkileşim kurmamızı sağlıyor. keydown tuşa basıldığı anda, keypress basılabilir karakterler için (ama pek önerilmiyor), keyup ise tuş bırakıldığı anda tetikleniyor. Genellikle keydown ve keyup‘ı birlikte kullanarak daha kontrollü ve kullanıcı dostu arayüzler oluşturabiliriz. Ne güzel değil mi? Bu olayları anlamak, interaktif web uygulamaları yaparken bize büyük esneklik sağlıyor. Kendi projelerinizde de deneyerek bu farkları daha iyi kavrayabilirsiniz. Bu arada, bu konuyu daha detaylı incelemek isterseniz, MDN Web Docs’ta harika kaynaklar bulabilirsiniz. Burada `keydown` olayı hakkında daha fazla bilgiye ulaşabilirsiniz. Ya da genel olarak klavye olaylarını merak ediyorsanız, Google’da “javascript keyboard events” diye aratıp bolca kaynağa ulaşabilirsiniz. Umarım bu yazı, bu üç olayın arasındaki farkları netleştirmiştir.
İşte size daha somut bir kod örneği. Bu kodda, sayfanın herhangi bir yerine tıkladığınızda (bu bir input alanı olmasa bile), bir tuşa bastığınızda konsola tuşun adını ve hangi olayın tetiklendiğini yazdıracağız. ‘Enter’ tuşuna basıldığında özel bir mesaj da gösterebiliriz. Hatta ‘Shift’ tuşuna basılıyken başka bir tuşa basıldığında farklı bir işlem de yapabiliriz. Bu örnek, `keydown` ve `keyup` olaylarının nasıl birlikte kullanılabileceğini de gösteriyor. Hadi deneyelim!
event.preventDefault() kullanmayı da unutmayın eğer bir tuşun varsayılan davranışını engellemek istiyorsanız. Mesela ‘Enter’ tuşuna basıldığında formun submit olmasını istemiyorsanız, keydown olayında event.preventDefault() çağırabilirsiniz. Bu, o olayın normal akışını durdurur. Bu da bazen kodumuzu daha temiz tutmamızı sağlıyor, gerçi.
Bir de şöyle bir şey var, tarayıcı uyumluluğu meselesi. Eskiden bu olaylar arasında tarayıcıdan tarayıcıya biraz farklar olabiliyordu ama artık günümüzde çoğu tarayıcı bu konuda oldukça iyi. Yine de, eğer çok eski tarayıcıları hedefliyorsanız, bu olayların davranışlarını test etmekte fayda var. Ya da daha güvenli bir yol olarak, sadece keydown ve keyup olaylarını kullanıp keypress‘ten kaçınabilirsiniz. Çünkü keypress‘in davranışı gerçekten de bazen garip olabiliyor. Bana göre en stabil olanlar her zaman keydown ve keyup olmuştur.
Neyse efendim, sonuç olarak bu üç olay da klavye etkileşimleri için bizim elimizdeki araçlar. Hangisini ne zaman kullanacağımızı bilmek, daha dinamik ve kullanıcı dostu web siteleri yapmamızı sağlıyor. Kendi projelerinizde denemeler yaparak bu konudaki ustalığınızı artırabilirsiniz. Unutmayın, en iyi öğrenme yolu denemektir! 🙂 Belki de bir sonraki büyük projenizde bu klavye olayları size ilham verir, kim bilir?