We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Creating and triggering events Redirect 2

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) {
  // e.target 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: Nickolay,