JavaScript Academy · Ders

addEventListener Temelleri

Olaylar için öğelere işleyiciler bağlayın.

addEventListener Temelleri, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 1. 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.

Olaylara Yanıt Verme

Olaylar, kodunuzun tıklamalar, tuş basımları ve form gönderimleri gibi kullanıcı eylemlerine tepki vermesini sağlar. addEventListener, abone olmanın standart yoludur.

Temel Söz Dizimi

addEventListener yöntemini bir olay adı ve işleyici işleviyle çağırın. İşleyici, olay her gerçekleştiğinde çalışır.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

Adlandırılmış İşleyiciler

Adlandırılmış bir işlev aktarabilirsiniz. Bu, kodu düzenli tutar ve en önemlisi, dinleyiciyi daha sonra kaldırmanıza olanak tanır.

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

Birden Çok Dinleyici

Eski onclick özelliğinin aksine, birbirlerinin üzerine yazmadan aynı olay için birçok dinleyici bağlayabilirsiniz.

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

Dinlemeyi durdurmak için eklerken kullandığınız aynı olay adı ve işlev başvurusuyla removeEventListener çağrısı yapın.

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

Anonim İşlevler Kaldırılamaz

Satır içi bir ok işlevi her seferinde yeni bir başvuru oluşturur; bu nedenle daha sonra kaldırılamaz. Kaldırmanız gerekiyorsa adlandırılmış bir başvuru kullanın.

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

once Seçeneği

{ once: true } aktarılması, dinleyici tek kez çalıştıktan sonra otomatik olarak kaldırılmasını sağlar.

btn.addEventListener("click", init, { once: true });

capture Seçeneği

Dinleyiciler varsayılan olarak kabarcıklanma aşamasında çalışır. { capture: true }, onların bunun yerine yakalama aşamasında çalışmasını sağlar.

parent.addEventListener("click", handler, { capture: true });

passive Seçeneği

{ passive: true }, preventDefault çağrısı yapmayacağınızı belirtir ve tarayıcının kaydırma performansını iyileştirmesine olanak tanır.

window.addEventListener("scroll", onScroll, { passive: true });

signal Seçeneği

Bir AbortController sinyali, iptal ederek bir dinleyiciyi veya birçok dinleyiciyi kaldırmanızı sağlar; bu, temizleme işlemleri için kullanışlıdır.

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

İşleyicilerdeki Bağlam

Normal bir işlev işleyicisinde this, dinleyicinin bağlandığı öğeyi belirtir. Ok işlevleri this değerini yeniden bağlamaz.

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

Hızlı Kontrol

Kaldırma kurallarını sınayın.

Özet

addEventListener(type, handler, options), olaylara abone olur ve birden çok dinleyiciyi destekler. Dinleyicileri, aynı başvuruyu kullanarak removeEventListener ile kaldırın; bu nedenle adlandırılmış işlevleri tercih edin. Kullanışlı seçenekler arasında once, capture, passive ve signal bulunur. Normal işleyicilerde this, hedef öğedir.

Sıkça Sorulan Sorular

“addEventListener Temelleri” dersi ücretsiz mi?

Evet — “addEventListener Temelleri” 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.

“addEventListener Temelleri” dersinde ne öğreneceğim?

Olaylar için öğelere işleyiciler bağlayın. 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 1. dersidir.

“addEventListener Temelleri” 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