Disparando Eventos Programaticamente - 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".