Document.createEvent()

 

Creates an event of the type specified. The returned object should be first initialized and can then be passed to element.dispatchEvent.

var event = document.createEvent(type);

Creating custom events

var event = new Event('build');

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

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

Adding custom data – CustomEvent()

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

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

The old-fashioned way

// 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) {
  // e.target matches document from above
}, false);

// target can be any Element or other EventTarget.
document.dispatchEvent(event);

Triggering built-in events

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.
    alert("canceled");
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");
  }
}

Browser compatibility

 

See also

• document.createEvent()
• Event.initEvent()
• EventTarget.dispatchEvent()
• EventTarget.addEventListener()

Event type strings suitable for passing to createEvent are defined in event modules. Some event modules are defined in DOM Events specifications, some modules are defined in other specification (such as SVG), and some event types are Gecko-specific. See the table below for details.

The reason some events can be created using any of two event type strings is that DOM Level 3 Events changed the event type strings to be singular, while still supporting older plural names for backwards-compatibility.