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 --- files/pt-br/_redirects.txt | 3 +- files/pt-br/_wikihistory.json | 12 +- .../creating_and_triggering_events/index.html | 146 +++++++++++++++++++++ .../creating_and_triggering_events/index.html | 146 --------------------- 4 files changed, 154 insertions(+), 153 deletions(-) create mode 100644 files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/pt-br/web/guide/events/creating_and_triggering_events/index.html (limited to 'files/pt-br') diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index dc5ef533e0..ab7c16ba17 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -730,9 +730,10 @@ /pt-BR/docs/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) /pt-BR/docs/orphaned/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) /pt-BR/docs/Web/Guide/CSS/Scaling_background_images /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /pt-BR/docs/Web/Guide/CSS/Understanding_z_index /pt-BR/docs/Web/CSS/CSS_Positioning/Understanding_z_index +/pt-BR/docs/Web/Guide/Events/Creating_and_triggering_events /pt-BR/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /pt-BR/docs/Web/Guide/Events/Mutation_events /pt-BR/docs/orphaned/Web/Guide/Events/Mutation_events /pt-BR/docs/Web/Guide/Events/Touch_events /pt-BR/docs/Web/API/Touch_events -/pt-BR/docs/Web/Guide/Events/criando_e_disparando_eventos /pt-BR/docs/Web/Guide/Events/Creating_and_triggering_events +/pt-BR/docs/Web/Guide/Events/criando_e_disparando_eventos /pt-BR/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /pt-BR/docs/Web/Guide/Gráficos /pt-BR/docs/Web/Guide/Graphics /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial /pt-BR/docs/Web/API/Canvas_API/Tutorial /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Advanced_animations /pt-BR/docs/Web/API/Canvas_API/Tutorial/Advanced_animations diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index dd23a42b41..a7076ab9f3 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -15829,12 +15829,6 @@ "MaxWilliamJF" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2019-03-23T22:11:33.073Z", - "contributors": [ - "JefersonOliveira90" - ] - }, "Web/API/Touch_events": { "modified": "2019-03-23T23:21:11.070Z", "contributors": [ @@ -17367,5 +17361,11 @@ "contributors": [ "rafaelcavalcante" ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-03-23T22:11:33.073Z", + "contributors": [ + "JefersonOliveira90" + ] } } \ No newline at end of file diff --git a/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..fc886b74c6 --- /dev/null +++ b/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,146 @@ +--- +title: Criando e disparando eventos +slug: orphaned/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/Creating_and_triggering_events +--- +

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

+ + 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