JavaScript Academy · Ders

Özel Olaylar

Kendi olaylarınızı oluşturun ve gönderin.

4. ders / 413 adım

Özel 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.

Yerleşik Olayların Ötesinde

DOM, CustomEvent kullanarak kendi olaylarınızı oluşturup göndermenize olanak tanır. Bu, uygulamanızın bölümlerini birbirinden bağımsızlaştırır: bir bileşen bir şey olduğunu duyurur, diğerleri doğrudan başvuru olmadan dinler.

CustomEvent Oluşturma

new CustomEvent(name, options) ile bir tane oluşturun. Ad, seçtiğiniz herhangi bir dize olabilir.

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

Gönderme

dispatchEvent ile olayı bir hedef üzerinde başlatın. Hedefte bu ad için kayıtlı olan veya olay kabarıyorsa bir ata öğede kayıtlı olan her dinleyici çalışır.

element.dispatchEvent(new CustomEvent("cart:add"));

Dinleme

Özel adınızı addEventListener ile kullanarak yerleşik bir olayı dinlediğiniz gibi dinleyin.

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

Ayrıntı ile Veri Aktarma

detail özelliği aracılığıyla bir yük ekleyin. Dinleyiciler bu yükü event.detail üzerinden okur.

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

Yükü Okuma

Dinleyicinin içinde event.detail, gönderdiğiniz her şeyi içerir. Bu değer herhangi bir türde olabilir: nesne, dizi, dize veya sayı.

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

Kabarma Sağlama

Özel olaylar varsayılan olarak NOT kabarır. Üst öğelerin ve delegasyon dinleyicilerinin olayı duyabilmesi için bubbles: true ayarlayın.

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

İptal Edilebilir Seçeneği

Dinleyicilerin preventDefault() çağırmasına izin vermek için cancelable: true ayarlayın. Olayı gönderen kod, iptal edilip edilmediğini görmek için dispatchEvent dönüş değerini denetler.

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

Bağımsızlaştırma Deseni

Özel olaylar, modüllerin birbirini içe aktarmadan iletişim kurmasını sağlar. Bir günlükleyici veya analiz katmanı, uygulama genelindeki olaylar için document üzerinde dinleme yapabilir.

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

Adlandırma Kuralları

Yerleşik olaylarla çakışmaları önlemek ve ilişkili olayları açıkça gruplamak için olay adlarını ad alanlarına ayırın (cart:add, user:login gibi).

Eski ve Yeni Söz Dizimi

Daha eski kodlarda eski document.createEvent API'sini görebilirsiniz. Daha modern new CustomEvent(...) oluşturucusunu tercih edin; bu daha basittir ve bugün yazmanız gereken tek biçimdir.

const evt = new CustomEvent("ready", { detail: 1 });

Hızlı Kontrol

Özel olaylar konusunu ne kadar öğrendiğinizi kontrol edin.

İnteraktif derste cevapla

Özet

Kendi olaylarınızı oluşturmak için new CustomEvent(name, { detail, bubbles, cancelable }) ve dispatchEvent kullanın. Yükü event.detail üzerinden okuyun, delegasyon için kabarmayı etkinleştirin ve iptal edilebilir eylemler için cancelable kullanın. Özel olaylar, bileşenleri temiz bir yayımla-abone ol tarzında birbirinden bağımsızlaştırır.

Başlamak ücretsiz

Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 59
Dersler: 200

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Özel Olaylar” dersi ücretsiz mi?

Evet — “Özel 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.

“Özel Olaylar” dersinde ne öğreneceğim?

Kendi olaylarınızı oluşturun ve gönderin. 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.

“Özel 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