How to Create and Trigger Event in JavaScript

This tutorial is aimed to teach you the right techniques to create and trigger DOM events (also called synthetic events).

You can create events with the Event constructor like in the following example which uses the <kbd class="highlighted">EventTarget.dispatchEvent()</kbd> method:

Javascript create event constructor and using dispatchEvent method

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1 id="elemId">Welcome to W3Docs</h1>
    <script>
      const elemId = document.getElementById('elemId');
      document.addEventListener("welcome", function(event) {
        alert("Hi, " + event.target.tagName); // Hi H1
      });
      let event = new Event("welcome", {
        bubbles: true
      });
      elemId.dispatchEvent(event);
    </script>
  </body>
</html>

Try it Yourself »

The <kbd class="highlighted">addEventListener()</kbd> registers a callback function that will be called whenever the defined event is dispatched to the target.

To append additional data to the event object, you can use the CustomEvent interface and the detail property to pass custom data:

Javascript create custom event

let event = new CustomEvent('eventName', {
  detail: elem.prop.name
});

Then you can access the specified additional data in the event listener by using the following code:

Javascript create custom event

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1 id="elemId">Welcome to W3Docs</h1>
    <script>
      const elemId = document.getElementById('elemId');
      elemId.addEventListener("welcome", function(event) {
        alert(event.detail.name);
      });
      elemId.dispatchEvent(new CustomEvent("welcome", {
        detail: {
          name: "W3Docs"
        }
      }));
    </script>
  </body>
</html>

Try it Yourself »

It is often recommended to trigger an event from a child element:

Javascript create custom event

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      let text = document.querySelector('input');
      const eventAwesome = new CustomEvent('awesome', {
        bubbles: true,
        detail: {
          text: () => text.value
        }
      });
      text.addEventListener('awesome', e => alert(e.detail.text()));
      text.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
    </script>
  </body>
</html>

Try it Yourself »

To create and dispatch events dynamically you can use the following code:

Javascript create and dispatch events dynamically

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      let inputText = document.querySelector('input');
      inputText.addEventListener('awesome', e => alert(e.detail.text()));
      inputText.addEventListener('input', function() {
        this.dispatchEvent(new CustomEvent('awesome', {
          bubbles: true,
          detail: {
            text: () => inputText.value
          }
        }))
      });
    </script>
  </body>
</html>

Try it Yourself »

The dispatchEvent

The dispatchEvent delivers an Event at the specified EventTarget, synchronously executing the affected EventListeners in an appropriate order. Unlike native events that are fired by the DOM and call event handlers asynchronously with the help of the event loop, the dispatchEvent method executes event handlers synchronously.