Event Listeners

CustomEvent()

Create and emit custom events.

The CustomEvent() method accepts two arguments: an event name, and and object of options. In the options, you can specify if the event should bubble and be cancelable (both false by default). You can also pass along additional information that an event listener can use with the detail property.

After setting up your event, call the dispatchEvent() method on your element and pass in the event as an argument.

// Create a new event
let event = new CustomEvent('myCustomEvent', {
	bubbles: true,
	cancelable: true,
	detail: {
		someDetail: 'the detail value'
	}
});

// Dispatch the event
let elem = document.querySelector('#the-element-to-emit-on');
elem.dispatchEvent(event);

⏰ Preorder my new course on Web Components! Want to learn how to build Web Components from scratch, master best practices, and more? Preorder today and get $100 off of the launch price.

Find this useful? You can support my work by purchasing an annual membership.