Jinsi ya Kutengeneza Custom JS Events kwa Components

Custom Events huruza communication kati ya components au elements bila kuingilia DOM direct. Hii inasaidia modular, reusable code na interactive UI.

✅ A. HTML Example
<button id="notifyBtn">Notify Parent</button>
<div id="message"></div>

✅ B. JavaScript (Creating & Dispatching Custom Event)
const btn = document.getElementById('notifyBtn');
const message = document.getElementById('message');

// Create and dispatch custom event
btn.addEventListener('click', () => {
const event = new CustomEvent('userClicked', {
detail: { time: new Date(), info: 'Button clicked!' }
});
btn.dispatchEvent(event);
});

// Listen to custom event
btn.addEventListener('userClicked', (e) => {
message.textContent = `Event triggered at ${e.detail.time}: ${e.detail.info}`;
});

✅ Jinsi Inavyofanya Kazi

CustomEvent → inatengeneza event mpya na data (detail)

dispatchEvent → inatuma event kwenye element

addEventListener → inasikiliza custom event

Hii inarahisisha component communication bila global state

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 WhatsApp Msaada:
https://wa.me/255693118509