# dispatchEvent method

The `dispatchEvent` method allows you to simulate an event on an element. Why do you need it: you can simulate a user clicking on a button, trying to submit a form, and so on. In this case, the event will not differ from the real one except for the `event.isTrusted` property. You can even create events with non-standard (your own) names and then call them at the right time. The method is applied to the element on which the event is to be fired. As a parameter, the method receives an event (object) created using the new Event constructor.

## Syntax

`element.dispatchEvent(event);`

## Example

Let's say we have a button. When this button is pressed, a message is displayed. Let's make it there so that when you hover over the button with the mouse, this button thinks that it was clicked:

`<button id="button">button</button>` `let button = document.querySelector('#button'); button.addEventListener('click', function() { alert('message'); }); button.addEventListener('mouseover', function() { let clickEvent = new Event('click'); // we create the event this.dispatchEvent(clickEvent); // simulate the button click });`

:

## Example

You can create your own events (with your own name) and then call them at the right time. Let's bind the `showMessage` event to a button and initialize this event on hover:

`<button id="button">кнопка</button>` `let button = document.querySelector('#button'); button.addEventListener('showMessage', function() { alert('message'); }); button.addEventListener('mouseover', function() { let showMessageEvent = new Event('showMessage'); // we create the event this.dispatchEvent(showMessageEvent); // trigger the event });`

:

← →
↑
en ru