JavaScript: CustomEvent ve dispatchEvent'i Anlamak

EventBu yazıda, , CustomEventyapıcıları ve dispatchEvent()yöntemi kullanarak olayları nasıl oluşturabileceğimizi ve gönderebileceğimizi açıklamaya çalışacağım . Projelerimizde özel etkinliklerin ve gönderim olaylarının nasıl ve hangi amaçlarla kullanıldığını da keşfedeceğiz.

Umarım bu makalenin sonunda özel etkinlikler oluşturabileceksiniz.

Öyleyse başlayalım!

Bir web uygulaması bir dizi olaydan oluşur ve bu olayların bir web uygulamasının en önemli parçalarından biri olduğunu söyleyebiliriz.

Bazı durumlarda, varsayılan JavaScript olayları gereksinimlerimizi karşılamaz. Örneğin, uygulamalarımızda bildirim eklemek, bazı verileri yenilemek vb. için varsayılan JavaScript olaylarında bulunmayan bazı özel etkinlikler kullanıyoruz. Bunlara makalenin geri kalanında göz atacağız.

Özel etkinlikleri nasıl oluşturabiliriz?

Özel etkinlikler oluşturmanın iki yolu vardır.

• İlk yol, bir Event yapıcısı kullanmaktır.
• İkinci yol, tercih ettiğimiz CustomEvent yapıcısını kullanmaktır.

Etkinlik Oluşturucu

Event oluşturucusuyla aşağıdaki gibi özel etkinlikler oluşturabilirsiniz:

Lütfen olay adlarının büyük/küçük harfe duyarlı olmadığını unutmayın. Yani veya NOTIFICATION_ADD ile aynıdır .Notification_Add notification_add

const event = new Event('NOTIFICATION_ADD');

Yukarıda da belirttiğimiz gibi event nesnesine daha fazla veri eklemek istiyorsak CustomEvent yapıcısını şu şekilde kullanabiliriz:

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

Peki, etkinlik oluşturuldu. Sıradaki ne? Tabii ki projemizde kullanmak istiyoruz. Bir olayı tetiklemenin son adımı, dispatchEvent() yöntemini çağırmaktır. İçinde bir Event nesnesi olan bir olay parametresini kabul eder .

Size bir örnek göstereyim.

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

// We are dispatching the our custom event here.
window.dispatchEvent(event);

// Let's say we have a handleAddNotification function inside our project like below
function handleAddNotification(e) {
  // logic here.
  
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

<button onclick="handleButtonClick()">
  Create my account
</button>
const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

function handleButtonClick(){
 window.dispatchEvent(event);
}

function handleAddNotification(e) {
  alert(e.detail.title + ' ' + e.detail.message);
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

Hangi amaçla ve nerede kullanıyoruz?

Okumadan önce mikro önyüz hakkındaki bu makalelere bakmak isteyebilirsiniz.

ÇiçekSepeti'nde, burada bir mikro önyüz mimarimiz var ve bir düğme, bir araç ipucu, bir bildirim, bir onay kutusu vb. Gibi özel bileşenlerimiz ve birkaç parçamız var. Bazen bu bileşenler ve parçalar arasında iletişime ihtiyaç duyulur. İşte tam bu noktada özel etkinlikler bize yardımcı oluyor.

Örneklerden bahsedecek olursak, elimizde bir bildirim bileşeni var ve bunu bazı işlemlerden sonra sayfalardan birinde göstermek istiyoruz.

Bu durumda, bildirim bileşeninin 'NOTIFICATION_ADD' adlı bir olay dinleyicisi ve sayfanın bir kayıt formu vardır. Kullanıcı kayıt düğmesine bastığında, bir API isteği yaparız ve ardından, dispatchEvent yöntemi ve özel olay oluşturucu aracılığıyla bir başarı veya hata tost mesajı görüntüleriz.

Bildirim bileşeni üzerinde bulunan event listeners sayesinde daha önce başka projelerde tanımlanmış olan özel eventlerimizi istediğimiz yerde ve zamanda tetikleyebiliyoruz.

Özet

JavaScript özel etkinliklerini kullanmak, doğru kullanıldığında uygulamanızın hem kullanıcı hem de geliştirme deneyimini iyileştirebilir . Artık JavaScript'in klavye olayları, fare olayları vb. varsayılan olayları gereksinimlerimizi karşılamadığında özel olayları kullanabileceğimizi biliyoruz.

Referanslar