Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at

Creating and triggering events

This article demonstrates how to create and dispatch events.

Custom events

Creating events

Events can be created with the Event constructor as follows:

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.

The constructor is supported in most modern browsers (with Internet Explorer being the exception). For a more complex approach that is now frowned upon, see the old-fashioned way below.

Adding custom data – CustomEvent

To add more data to the event object, the CustomEvent interface exists. For example, the event could be created as follows:

var event = new CustomEvent('build', { 'detail': elem.dataset.time });

This will then allow accessing the additional data in the event listener:

function eventHandler(e) {
  log('The time is: ' + e.detail);

The old-fashioned way

Warning: This way of creating events is deprecated. Use event constructors instead.

The older approach to creating events uses APIs inspired by Java. The following shows an example:

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('build', true, true);

// Listen for the event.
document.addEventListener('build', function (e) {
  // matches document from above
}, false);

// target can be any Element or other EventTarget.

Triggering built-in events

This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. You can view the example in action here.

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  var cb = document.getElementById('checkbox'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // A handler called preventDefault.
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");

See also

Document Tags and Contributors

 Last updated by: Sheppy,