Disparando Eventos Programaticamente em JavaScript

Eventos podem surgir não apenas como resultado de ações do usuário em uma página web. Eles também podem ser disparados programaticamente.

Para disparar um evento programaticamente, pode-se chamar o método dispatchEvent() em um elemento da página web, passando uma instância do objeto Event (ou suas derivadas como MouseEvent ou KeyboardEvent).

const event = new Event(nome_do_evento, config); // definindo o objeto do evento
element.dispatchEvent(event); // disparando o evento para o elemento

O primeiro argumento passado ao construtor Event é uma string que representa o tipo de evento. Adicionalmente, pode-se passar um objeto de configuração como segundo parâmetro. Por meio deste objeto de configuração, é possível definir as seguintes propriedades:

cancelable: se o evento pode ser cancelado (true para cancelável, false para não cancelável)
bubbles: se o evento deve borbulhar (true para borbulhar)

Por exemplo, vamos programaticamente clicar em um link:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <a id="link" href="https://www.programicio.com">Programício</a>
    <script>
      const link = document.getElementById("link"); // obtendo o link
      const event = new MouseEvent("click");
      link.dispatchEvent(event);
    </script>
  </body>
</html>

O clique no link dispara um evento de mouse "click", então definimos um objeto do evento do tipo MouseEvent:

const event = new MouseEvent("click");

Então, disparamos o evento para o elemento link:

link.dispatchEvent(event);

Como resultado, ocorre a navegação pelo link já no carregamento da página.

E, como em qualquer caso geral, esse evento também pode ser tratado:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <a id="link" href="https://www.programicio.com">Programício</a>
    <script>
      const link = document.getElementById("link");

      link.addEventListener("click", (e) => {
        console.log("Link has been clicked");
        e.preventDefault(); // prevenindo a navegação
      });

      const event = new MouseEvent("click", { cancelable: true });
      link.dispatchEvent(event);
    </script>
  </body>
</html>

Para que a execução do evento possa ser interrompida, passamos um objeto de configuração com a propriedade cancelable: true como segundo parâmetro no construtor MouseEvent. Isso permite que o método e.preventDefault() seja chamado no manipulador do evento "click".