From 0ccebc7eb352eda4d26d0b876fea36f24f482eec Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 17 Apr 2021 00:11:36 +0000 Subject: [CRON] sync translated content --- .../creating_and_triggering_events/index.html | 146 --------------------- 1 file changed, 146 deletions(-) delete mode 100644 files/pt-br/web/guide/events/creating_and_triggering_events/index.html (limited to 'files/pt-br/web') diff --git a/files/pt-br/web/guide/events/creating_and_triggering_events/index.html b/files/pt-br/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 82e42d1fe6..0000000000 --- a/files/pt-br/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Criando e disparando eventos -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - Avançado - - DOM - - Guía - - JavaScript - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/criando_e_disparando_eventos ---- -

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

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
construtor Event()1511{{CompatVersionUnknown}}1111.606
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
-
- -

Veja também

- - -- cgit v1.2.3-54-g00ecf