MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados eventos sintéticos, oposto aos eventos disparados pelo próprio navegador.

Criando eventos customizados

Eventos podem ser criados com o construtor Event da seguinte forma:

var event = new Event('build');

// Ouve pelo evento.
elem.addEventListener('build', function (e) { ... }, false);

// Dispara o evento.
elem.dispatchEvent(event);

Este construtor é suportado na maioria dos navegadores modernos (com o Internet Explorer sendo exceção). Para uma abordagem mais verbosa (a qual é suportada pelo Internet Explorer), veja a forma antiga abaixo.

Adicionando dados customizados – CustomEvent()

Para adicionar mais dados ao objeto do evento, usa-se a interface CustomEvent, a qual possui a propriedade detail que pode ser utilizada para fornecer dados customizados.

Por exemplo, o evento pode ser criado da seguinte forma:

var event = new CustomEvent('build', { 'detail': elem.dataset.time });

Isso permitirá que você acesse dados customizados no listener do evento:

function eventHandler(e) {
  console.log('The time is: ' + e.detail);
}

A forma antiga

A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:

// Cria o evento.
var event = document.createEvent('Event');

// Define que o nome do evento é 'build'.
event.initEvent('build', true, true);

// Ouve pelo evento.
elem.addEventListener('build', function (e) {
  // e.target é igual a elem, neste caso
}, false);

// O alvo do evento pode ser qualquer instância de Element ou EventTarget.
elem.dispatchEvent(event);

Disparando eventos nativos

Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. Veja o exemplo em ação.

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var cb = document.getElementById('checkbox'); 
  var cancelled = !cb.dispatchEvent(event);

  if (cancelled) {
    // Um listener invocou o método preventDefault.
    alert("Cancelado");
  } else {
    // Nenhum listener invocou o método preventDefault.
    alert("Não cancelado");
  }
}

Compatibilidade entre navegadores

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
construtor Event() 15 11 (Yes) 11 11.60 6
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico ? ? ? ? 6

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: JefersonOliveira90
 Última atualização por: JefersonOliveira90,