Olay Nesnesi
Hedef ve tür gibi olay ayrıntılarını okuyun.
Olay Nesnesi, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. 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.
Olay Bağımsız Değişkeni
Bir olay gerçekleştiğinde tarayıcı, işleyicinize bir olay nesnesi aktarır. Bu nesne, ne olduğu ve hangi öğelerin dâhil olduğu hakkında ayrıntılar taşır.
btn.addEventListener("click", (event) => {
console.log(event.type); // "click"
});event.type
event.type, olayın adıdır; böylece tek bir işleyici farklı olay türlerine farklı tepkiler verebilir.
function handle(e) {
console.log("Got a " + e.type + " event");
}event.target
event.target, olayın gerçekten başladığı öğedir; etkileşime geçilen en içteki öğeyi belirtir.
list.addEventListener("click", (e) => {
console.log(e.target); // the exact clicked element
});event.currentTarget
event.currentTarget, dinleyicisi o anda çalışan öğedir; yani addEventListener çağrısını yaptığınız öğedir.
list.addEventListener("click", (e) => {
console.log(e.currentTarget === list); // true
});target ve currentTarget
Olaylar kabarcıklandığında target bir alt öğe, currentTarget ise dinleyen üst öğe olabilir. Bu ayrım, olay yetkilendirmenin temelini oluşturur.
list.addEventListener("click", (e) => {
// e.target = clicked <li>
// e.currentTarget = the <ul>
});Olay Yetkilendirme
Bir üst öğeye tek bir dinleyici bağlayın ve hangi alt öğeye etkileşim uygulandığını bulmak için target.closest kullanın. Bu yaklaşım, çok sayıda dinleyici kullanmaktan daha iyi ölçeklenir.
list.addEventListener("click", (e) => {
const item = e.target.closest("li");
if (item) console.log(item.dataset.id);
});event.timeStamp
event.timeStamp, olayın ne zaman oluşturulduğunu kaydeder; olaylar arasındaki süreleri ölçmek için kullanışlıdır.
btn.addEventListener("click", (e) => {
console.log(e.timeStamp);
});Fare Olaylarındaki Koordinatlar
Fare olayları, görünüm alanına göre clientX/clientY ve belgeye göre pageX/pageY gibi konum verileri ekler.
area.addEventListener("click", (e) => {
console.log(e.clientX, e.clientY);
});Değiştirici Tuşlar
e.shiftKey, e.ctrlKey, e.altKey ve e.metaKey gibi özellikler, hangi değiştirici tuşların basılı tutulduğunu belirtir.
btn.addEventListener("click", (e) => {
if (e.shiftKey) console.log("Shift-click");
});event.isTrusted
event.isTrusted, gerçek kullanıcı tarafından oluşturulan olaylar için true, betik tarafından oluşturulan olaylar için false değerini taşır; böylece gerçek girdiyi ayırt etmeye yardımcı olur.
btn.addEventListener("click", (e) => {
console.log(e.isTrusted);
});Tuşu Okuma
Klavye olayları, belirli tuşlara tepki verebilmeniz için e.key değerini (karakteri veya adı) sunar.
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") console.log("submit");
});Hızlı Kontrol
İki hedefi birbirinden ayırın.
Özet
Olay nesnesi, olayı açıklar: type, target (olayın başladığı yer) ve currentTarget (dinleyicinin bulunduğu yer). Aralarındaki fark, olay yetkilendirmeyi mümkün kılar. Olaylar ayrıca koordinatları, değiştirici tuşları, key, timeStamp ve isTrusted değerlerini sunar.
Sıkça Sorulan Sorular
“Olay Nesnesi” dersi ücretsiz mi?
Evet — “Olay Nesnesi” 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.
“Olay Nesnesi” dersinde ne öğreneceğim?
Hedef ve tür gibi olay ayrıntılarını okuyun. 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 2. dersidir.
“Olay Nesnesi” 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.