Source Code: (back to article)
<!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>