How do I create custom events in JavaScript?

How do I create custom events in JavaScript?

You can create custom events in JavaScript using the CustomEvent constructor. Here's a simple example:

const myEvent = new CustomEvent('myEventName', { detail: { key: 'value' }});
document.dispatchEvent(myEvent);

This creates a new event called 'myEventName' with some data attached.

How do I listen for that custom event?

You can listen for the custom event using the addEventListener method. Here's how you can do it:

document.addEventListener('myEventName', function(e) {
    console.log('Custom event triggered:', e.detail);
});

Can I pass multiple pieces of data with the event?

Yes, you can pass multiple pieces of data by including them in the detail object. For example:

const myEvent = new CustomEvent('myEventName', { detail: { key1: 'value1', key2: 'value2' }});

What if I want to cancel the event?

You can use the preventDefault method on the event object to cancel it. However, you need to set the cancelable property to true when creating the event:

const myEvent = new CustomEvent('myEventName', { cancelable: true });