MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    Creating and triggering events

    This article demonstrates how to create and dispatch events.

    Creating custom 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.
    elem.dispatchEvent(event);

    This constructor is supported in most modern browsers (with Internet Explorer being the exception). For a more verbose approach, see the old-fashioned way below.

    Adding custom data – CustomEvent()

    To add more data to the event object, the CustomEvent interface exists and the detail property can be used to pass custom data.
    For example, the event could be created as follows:

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

    This will then allow you to access the additional data in the event listener:

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

    The old-fashioned way

    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.
    document.dispatchEvent(event);
    
    

    Triggering built-in events

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

    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

     

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Event() constructor 15 11 Not supported 11.60 6
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? 6

    See also

    Document Tags and Contributors

    Last updated by: alexilyaev,