Evento de expedição JavaScript

Resumo : neste tutorial, você aprenderá como criar e despachar eventos programaticamente usando Eventconstrutor e dispatchEvent()método.

Normalmente, os eventos são gerados por ações do usuário, como cliques do mouse e pressionamentos de teclas . Além disso, eventos podem ser gerados a partir do código.

Para gerar um evento programaticamente, siga estas etapas:

• Primeiro, crie um novo Eventobjeto usando Evento construtor.
• Em seguida, acione o evento usando element.dispatchEvent()o método.

Construtor de evento

Para criar um novo evento, você usa o Eventconstrutor assim:

let event = new Event(type, [,options]);Linguagem de código:  JavaScript  ( javascript )

O Eventconstrutor aceita dois parâmetros:

tipo

é uma string que especifica o tipo de evento, como 'click'.

opções

é um objeto com duas propriedades opcionais:

• bubbles: é um valor booleano que determina se o evento borbulha ou não. Se for true, o evento será borbulhado e vice-versa.
• cancelable: também é um valor booleano que especifica se o evento pode ser cancelado quando for true.

Por padrão, o optionsobjeto é:

{ bubbles: false, cancelable: false}Linguagem de código:  CSS  ( css )

Por exemplo, o seguinte cria um novo clickevento com o optionsobjeto padrão:

let clickEvent = new Event('click');Linguagem de código:  JavaScript  ( javascript )

método despachoEvent

Depois de criar um evento, você pode dispará-lo em um elemento de destino usando o dispatchEvent()método como este:

element.dispatchEvent(event);Linguagem de código:  CSS  ( css )

Por exemplo, o código a seguir mostra como criar o clickevento e acioná-lo em um botão:

HTML:

<button class="btn">Test</button>Linguagem de código:  HTML, XML  ( xml )

JavaScript:

let btn = document.querySelector('.btn');

 btn.addEventListener('click', function () {
        alert('Mouse Clicked');
 });

let clickEvent = new Event('click');
btn.dispatchEvent(clickEvent);
Linguagem de código:  JavaScript  ( javascript )

Clique neste link para ver a demonstração .

Neste exemplo, o manipulador de eventos é executado como se o clickevento fosse gerado por ações do usuário.

Se o evento vier das ações do usuário, a event.isTrustedpropriedade será definida como true. Caso o evento seja gerado por código, o arquivo event.isTrustedé false. Portanto, você pode examinar o valor da event.isTrustedpropriedade para verificar a “autenticidade” do evento.

O Eventé o tipo base UIEventque é o tipo base de outros tipos de eventos específicos, como MouseEvent, TouchEvent, FocusEvente KeyboardEvent.

É uma boa prática usar o construtor de eventos especializado como MouseEvent em vez de usar o Eventtipo genérico porque esses construtores fornecem mais informações específicas para os eventos.

Por exemplo, o MouseEventevento tem muitas outras propriedades, como clientXe clientYque especificam as coordenadas horizontais e verticais nas quais o evento ocorreu em relação à janela de visualização:

let clickEvent = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    clientX: 150,
    clientY: 150
});Linguagem de código:  JavaScript  ( javascript )

O link a seguir mostra a lista completa de propriedades do MouseEvent

Resumo

• Use o construtor de evento específico, como MouseEvento método de chamada dispatchEvent()em um elemento, para gerar um evento a partir do código.
• Use event.isTrustedpara examinar se o evento é gerado a partir de código ou de ações do usuário.