Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom Event UI Update Example</title> </head> <body> <h1>User Status</h1> <div id="userInfo">Loading user information...</div> <script> // Function to simulate a data update function updateData() { let dataUpdateEvent = new CustomEvent('dataUpdated', { detail: { data: { username: 'user123', status: 'active' } } }); document.dispatchEvent(dataUpdateEvent); } // UI component listening for data updates document.addEventListener('dataUpdated', function(event) { let userData = event.detail.data; document.getElementById('userInfo').innerHTML = `Username: <strong>${userData.username}</strong>, Status: <strong>${userData.status}</strong>`; }); // Trigger the update setTimeout(() => { updateData(); }, 5000) </script> </body> </html>