jQuery Academy · Ders

Özel Olaylar Oluşturma ve Tetikleme

3. ders / 311 adım

Özel Olaylar Oluşturma ve Tetikleme, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 3. 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, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

Özel Olaylara Giriş

Hoş geldiniz! Bu derste jQuery'de kendi özel olaylarınızı nasıl oluşturacağınızı ve yöneteceğinizi öğreneceksiniz. Bu, kodunuzu daha düzenli ve esnek hâle getirmenin güçlü bir yoludur.

Özel olayları, web uygulamanızın farklı bölümlerinin gönderip alabileceği özel iletiler olarak düşünün. Bu sayede birbirlerine doğrudan bağlı olmadan iletişim kurabilirler.

Özel Olaylar Neden Kullanılır?

Özel olaylarla neden uğraşasınız? Özel olaylar yaygın bir sorunun çözülmesine yardımcı olur: sıkı bağlılık. Bileşenler sıkı biçimde bağlı olduğunda kodunuzun bir bölümünü değiştirmek başka bir bölümü bozabilir.

Bağımlılıkları azaltma: Bileşenlerin birbirlerinin iç çalışma şeklini bilmesi gerekmez.
Daha temiz kod: Belirli bir eylemle ilgili mantık merkezî hâle getirilir.
Esneklik: 'Göndereni' değiştirmeden dinleyicileri kolayca ekleyebilir veya kaldırabilirsiniz.

.trigger() Yöntemi

Özel bir olayı 'göndermek' veya 'tetiklemek' için jQuery'nin .trigger() yöntemini kullanırız. Bu yöntemi bir jQuery nesnesi (bir öğe veya document) üzerinde çağırır ve olay adını dize olarak aktarırız.

Olay adı, 'dataLoaded' veya 'itemAdded' gibi seçtiğiniz herhangi bir şey olabilir.

Olay Tetikleme Gösterimi

.trigger() yönteminin işleyişine bakalım. Tıklandığında bir düğmede 'myCustomEvent' adlı özel bir olayı tetikleyeceğiz. Henüz hiçbir şey olmayacak, çünkü dinleyen kimse yok!

<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>

<script>
$(document).ready(function() {
  $('#triggerButton').on('click', function() {
    // Fire our custom event on the button itself
    $(this).trigger('myCustomEvent');
    console.log('myCustomEvent triggered!');
  });
});
</script>

.on() ile Dinleme

Özel bir olayı 'almak' veya 'dinlemek' için tanıdık .on() yöntemini kullanırız. 'click' gibi yerleşik olaylarda olduğu gibi, olay adını ve tetiklendiğinde çalıştırılacak bir işlevi belirtirsiniz.

Olayı tetikleyen aynı öğeyi, bir üst öğeyi veya genel olaylar için document öğesinin kendisini dinleyebilirsiniz.

Tetikleme ve Dinleme Örneği

Şimdi .trigger() ve .on() yöntemlerini birlikte kullanalım. Düğmeye tıkladığınızda iletinin göründüğünü ve özel olayımızın hem tetiklenip hem de dinlendiğini göreceksiniz!

<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>

<script>
$(document).ready(function() {
  // 1. Listen for 'buttonClicked' on the button
  $('#myButton').on('buttonClicked', function() {
    $('#statusMessage').text('Status: Custom event received!');
  });

  // 2. When the button is clicked, trigger 'buttonClicked'
  $('#myButton').on('click', function() {
    $(this).trigger('buttonClicked');
  });
});
</script>

Olaylarla Veri Aktarma

Özel olaylar, onlarla birlikte veri aktarabildiğinizde daha da kullanışlı olur. Olay adından sonra .trigger() yöntemine ek bağımsız değişkenler gönderebilirsiniz. Bu bağımsız değişkenler olay işleyicisi işlevinize aktarılır.

İşleyicideki ilk bağımsız değişken her zaman olay nesnesidir.
Sonraki bağımsız değişkenler .trigger() ile aktardığınız verilerdir.

Özel Olay Verisi Gösterimi

Burada bir 'dataReady' olayını tetikliyor ve bir dize ile bir nesne aktarıyoruz. Dinleyici bu verileri alıp görüntülüyor. Bileşenler bu şekilde bilgi paylaşır!

<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>

<script>
$(document).ready(function() {
  // Listen for 'dataReady' and extract the passed data
  $(document).on('dataReady', function(event, message, details) {
    const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`; 
    $('#output').html(outputText);
  });

  // When button clicked, trigger 'dataReady' with data
  $('#loadData').on('click', function() {
    const msg = 'Data successfully loaded!';
    const data = { status: 'complete', item: 'report' };
    $(document).trigger('dataReady', [msg, data]);
    console.log('Data event triggered!');
  });
});
</script>

Daha İyi Uygulamalar İçin Bağımlılıkları Azaltma

İletişim için özel olayları kullanmak, daha modüler ve bakımı kolay uygulamalar oluşturmaya yardımcı olur. Bir 'alışveriş sepeti' bileşeniyle bir 'ürün görüntüleme' bileşeni olduğunu düşünün.

Bir ürün eklendiğinde 'ürün görüntüleme' bileşeni 'productAdded' olayını tetikler.
'Alışveriş sepeti' bileşeni 'productAdded' olayını dinler ve kendini günceller.

Olay sözleşmesi dışında hiçbir bileşenin diğerinin iç yöntemlerini bilmesi gerekmez.

Anlayışınızı Kontrol Edin

Aşağıdaki ifadelerden hangileri .trigger() ve .on() ile özel olayların yararlarını veya kullanımını doğru şekilde açıklar?

İnteraktif derste cevapla

Özet: Özel Olaylar

Harika iş çıkardınız! jQuery'de özel olayları nasıl oluşturacağınızı ve yöneteceğinizi öğrendiniz. Kısa bir özet:

Nedir: Özel olaylar, uygulama bileşenleri için kullanıcı tanımlı iletilerdir.
Neden: Bağımlılıkları azaltmayı teşvik ederek daha temiz ve esnek kod sağlarlar.
Nasıl: Bir olayı tetiklemek için .trigger('eventName', [data]) kullanılır.
Nasıl: Bir olayı dinlemek için .on('eventName', function(event, data) { ... }) kullanılır.

Özel olaylarda ustalaşmak, sağlam ve ölçeklenebilir jQuery uygulamaları oluşturma yolunda önemli bir adımdı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: 22
Dersler: 48

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

Sıkça Sorulan Sorular

“Özel Olaylar Oluşturma ve Tetikleme” dersi ücretsiz mi?

Evet — “Özel Olaylar Oluşturma ve Tetikleme” 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 jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“Özel Olaylar Oluşturma ve Tetikleme” dersinde ne öğreneceğim?

Bileşenleri birbirinden ayırmak, daha temiz kod oluşturmak ve uygulamanızın farklı bölümleri arasında esnek iletişim sağlamak için .trigger() ve .on() kullanarak özel olaylar tasarlayıp uygulayın. jQuery 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.

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

Önceden deneyim gerekmez. CoddyKit'te jQuery 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, 3 dersinin 3. dersidir.

“Özel Olaylar Oluşturma ve Tetikleme” 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 jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery 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

← jQuery Academy Sayfasına Dön