How to simulate mouse and keyboard events with vanilla JS

In the past, I’ve written about how to create custom events with vanilla JS.

Today, we’re going to look at how to simulate native browser events, things like click and keydown, instead.

Let’s dig in.

The new Event() constructor

You can create a new event using the new Event() constructor.

Pass in the type of event to create, and an object of options, such as whether or not it bubbles or is cancelable. Then, call the dispatchEvent() method on the element you want to dispatch the event on, and pass the event in as an argument.

// Create a new event
var event = new Event('click', {
	bubbles: true,
	cancelable: true
});

// Dispatch the event
document.body.dispatchEvent(event);

A helper function

If you need to do this a lot with different types of events, you can create a simple helper function.

In the simulateEvent() function, we’ll accept the elem to simulate the event on, and the type of event to dispatch, as arguments.

var simulateEvent = function (elem, type) {

	// Create a new event
	var event = new Event(type, {
		bubbles: true,
		cancellable: true
	});

	// Dispatch the event
	elem.dispatchEvent(event);

};

Here’s a demo.

Browser compatibility

The new Event() constructor works in all modern browsers, but not IE.