یک رابط کاربری ساده با دو بخش بسازید که یکی از بخش‌ها با کلیک یک Custom Event حاوی داده را منتشر کند و بخش دیگر آن رو شنیده و محتوای خود را با داده‌ی دریافتی بروزرسانی کند.

برای حل این سوال از جاوااسکریپت و API‌های DOM استفاده کنید: یک عنصر مثل دکمه بسازید که هنگام کلیک new CustomEvent('data:update', {detail: {text: 'متن نمونه'}, bubbles: true}) را ایجاد و با dispatchEvent منتشر کند، و یک عنصر نمایشگر که با addEventListener('data:update', e => { /* خواندن e.detail و به‌روزرسانی DOM */ }) به این رویداد گوش دهد و محتوایش را تغییر دهد. نکات مفید: از event.detail برای انتقال داده استفاده کنید، در صورت نیاز bubbles: true را فعال کنید تا شنونده‌های والد هم بتوانند رویداد را دریافت کنند، و از توابع جدا برای ایجاد و ثبت listener ها برای خوانایی کد بهره ببرید.