We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,