Custom Events in JavaScript

1// Method 1: Create custom event
2const customEvent = new CustomEvent('myCustomEvent', {
3    detail: { message: 'Hello from custom event', data: 123 },
4    bubbles: true,
5    cancelable: true
6});
7
8// Listen for custom event
9document.addEventListener('myCustomEvent', function(event) {
10    console.log('Custom event received:', event.detail);
11    console.log('Message:', event.detail.message);
12    console.log('Data:', event.detail.data);
13});
14
15// Dispatch custom event
16document.dispatchEvent(customEvent);
17
18// Method 2: Custom event on specific element
19const button = document.getElementById('myButton');
20
21button.addEventListener('buttonClicked', function(e) {
22    console.log('Button custom event:', e.detail);
23});
24
25const buttonEvent = new CustomEvent('buttonClicked', {
26    detail: { buttonId: 'myButton', timestamp: Date.now() }
27});
28
29button.dispatchEvent(buttonEvent);
30
31// Method 3: Event with data
32const dataEvent = new CustomEvent('dataUpdate', {
33    detail: {
34        userId: 123,
35        action: 'update',
36        payload: { name: 'John', age: 30 }
37    }
38});
39
40document.addEventListener('dataUpdate', function(e) {
41    console.log('User ID:', e.detail.userId);
42    console.log('Action:', e.detail.action);
43    console.log('Payload:', e.detail.payload);
44});
45
46document.dispatchEvent(dataEvent);
47
48// Method 4: Event with validation
49function createValidatedEvent(type, data) {
50    if (!data || typeof data !== 'object') {
51        throw new Error('Data must be an object');
52    }
53    
54    return new CustomEvent(type, {
55        detail: data,
56        bubbles: true,
57        cancelable: true
58    });
59}
60
61const validatedEvent = createValidatedEvent('validated', { value: 42 });
62document.dispatchEvent(validatedEvent);