JavaScript Academy · Ders

Klavye ve Fare Olayları

Tıklamaları, tuş basışlarını ve işaretçi olaylarını yönetin.

Klavye ve Fare Olayları, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Girdi Olayı Aileleri

Fare ve klavye olayları, zengin etkileşimler oluşturmanızı sağlar. Her ailenin kendine özgü olay türleri ve özellikleri vardır.

click Olayı

click, birincil düğmeye basılıp bırakıldığında tetiklenir. Ayrıca düğmelerde ve bağlantılarda klavyeyle etkinleştirme sırasında da tetiklenir; bu da erişilebilir olmasını sağlar.

btn.addEventListener("click", () => {
  console.log("activated");
});

dblclick ve contextmenu

dblclick çift tıklamada, contextmenu ise sağ tıklamada tetiklenir; özel bir menü göstermek için ikincisi çoğu zaman iptal edilir.

el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());

mousedown, mouseup, mousemove

Bunlar basma, bırakma ve hareket üzerinde ayrıntılı denetim sağlar. Sürükleme etkileşimlerinin temel yapı taşlarıdır.

box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));

mouseenter ile mouseover karşılaştırması

mouseenter üst öğeye yayılmaz ve alt öğelerin sınırlarını dikkate almaz; mouseover ise yayılır ve alt öğelere geçildiğinde tetiklenir. Üzerine gelme davranışı için genellikle istediğiniz olay mouseenter olur.

el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));

Hangi Fare Düğmesi

button özelliği, olayı hangi düğmenin tetiklediğini belirtir: 0 sol, 1 orta, 2 sağ.

el.addEventListener("mousedown", (e) => {
  if (e.button === 2) console.log("right button");
});

keydown ve keyup

keydown, bir tuşa basıldığında tetiklenir ve tuş basılı tutulduğu sürece tekrarlanır; keyup ise tuş bırakıldığında tetiklenir. keypress kullanımdan kaldırılmıştır.

input.addEventListener("keydown", (e) => {
  console.log("down: " + e.key);
});

event.key

e.key, tuşun mantıksal değeridir: "a" gibi bir karakter ya da "Enter", "Escape" veya "ArrowUp" gibi bir ad.

input.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("cancel");
});

event.code

e.code, klavye düzeninden bağımsız olarak fiziksel tuş konumunu belirtir; örneğin "KeyA" veya "Space". Oyun denetimleri için bunu kullanın.

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") console.log("jump");
});

Klavye Kısayolları

Kısayolları algılamak için değiştirici bayraklarını key ile birleştirin ve tarayıcının varsayılan davranışını geçersiz kılmak için preventDefault çağrısını kullanın.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("save");
  }
});

Basılı Tuşlar için repeat

e.repeat, tuş basılı tutulduğu için bir keydown olayı tetiklendiğinde true değerindedir; böylece otomatik tekrarları yok sayabilirsiniz.

window.addEventListener("keydown", (e) => {
  if (e.repeat) return;
  console.log("first press of " + e.key);
});

Hızlı Kontrol

Klavye düzeninden bağımsız olan özelliği seçin.

Özet

Fare olayları arasında click, dblclick, mousedown/mouseup/mousemove ve üzerine gelme için uygun olan mouseenter/mouseleave bulunur; button hangi düğmenin kullanıldığını belirtir. Klavye olaylarında keydown/keyup kullanılır; karakter veya ad için e.key, fiziksel tuş için e.code ve basılı tuşlar için e.repeat kullanılır.

Sıkça Sorulan Sorular

“Klavye ve Fare Olayları” dersi ücretsiz mi?

Evet — “Klavye ve Fare Olayları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Klavye ve Fare Olayları” dersinde ne öğreneceğim?

Tıklamaları, tuş basışlarını ve işaretçi olaylarını yönetin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Klavye ve Fare Olayları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön