Canceling custom events with vanilla JS

Yesterday, we looked at how to create custom events for your libraries, components, and scripts. Today, I wanted to explore how to cancel custom events.

Let’s dig in.

What is canceling an event?

If your custom event has the cancelable option set to true, you can use the Event.preventDefault() method to cancel it.

document.addEventListener('my-custom-event', function (event) {

	// Cancel the event
	event.preventDefault();

});

Inside the bit of code that emitted the event, you can then detect if the event was canceled or not, and change the behavior of your code accordingly.

The Element.dispatchEvent() method returns false if the event was canceled, and true if it was not.

let canceled = !document.dispatchEvent(event);

Let’s look at an example.

An example

Let’s imagine you have a function that emits a custom event, then alerts a message. But, if the custom event is canceled, you don’t want to run the alert() method.

You would check if the event was canceled, and if so, end your function.

function sayHi () {

	// Create the event
	let event = new CustomEvent('my-custom-event', {
		bubbles: true,
		cancelable: true,
		detail: 'This is awesome. I could also be an object or array.'
	});

	// Emit the event
	let canceled = !document.dispatchEvent(event);

	// If cancelled, end the function
	if (canceled) return;

	// Otherwise, alert a message
	alert('Hi there!');

}

sayHi();

Inside an event listener, you could cancel the event like this.

document.addEventListener('my-custom-event', function (event) {
	console.log('The event was emitted');
	event.preventDefault();
});

This is generally reserved for events that are emitted before any actions take place in your library.

Here’s a demo.