diff options
author | MDN <actions@users.noreply.github.com> | 2021-04-17 00:11:36 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-04-17 00:11:36 +0000 |
commit | 0ccebc7eb352eda4d26d0b876fea36f24f482eec (patch) | |
tree | f5c0a32bc5149d8bd5aa7942577758ce7c8ed485 /files/pt-br/web | |
parent | 40cd01daeb2f6f7fff40ff2986208513afc8678e (diff) | |
download | translated-content-0ccebc7eb352eda4d26d0b876fea36f24f482eec.tar.gz translated-content-0ccebc7eb352eda4d26d0b876fea36f24f482eec.tar.bz2 translated-content-0ccebc7eb352eda4d26d0b876fea36f24f482eec.zip |
[CRON] sync translated content
Diffstat (limited to 'files/pt-br/web')
-rw-r--r-- | files/pt-br/web/guide/events/creating_and_triggering_events/index.html | 146 |
1 files changed, 0 insertions, 146 deletions
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 ---- -<p>Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados <strong>eventos sintéticos</strong>, oposto aos eventos disparados pelo próprio navegador.</p> - -<h2 id="Criando_eventos_customizados">Criando eventos customizados</h2> - -<p>Eventos podem ser criados com o construtor <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> da seguinte forma:</p> - -<pre class="brush: js">var event = new Event('build'); - -// Ouve pelo evento. -elem.addEventListener('build', function (e) { ... }, false); - -// Dispara o evento. -elem.dispatchEvent(event);</pre> - -<p>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 href="#The_old-fashioned_way" title="#The_old-fashioned_way">a forma antiga</a> abaixo.</p> - -<h3 id="Adicionando_dados_customizados_–_CustomEvent()">Adicionando dados customizados – CustomEvent()</h3> - -<p>Para adicionar mais dados ao objeto do evento, usa-se a interface <a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a>, a qual possui a propriedade <u><strong>detail</strong></u> que pode ser utilizada para fornecer dados customizados.</p> - -<p><span style="line-height: 1.5;">Por exemplo, o evento pode ser criado da seguinte forma:</span></p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p>Isso permitirá que você acesse dados customizados no listener do evento:</p> - -<pre class="brush: js">function eventHandler(e) { - console.log('The time is: ' + e.detail); -} -</pre> - -<h3 id="A_forma_antiga">A forma antiga</h3> - -<p>A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:</p> - -<pre class="brush: js">// Cria o evento. -var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('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); - -</pre> - -<h2 id="Disparando_eventos_nativos">Disparando eventos nativos</h2> - -<p>Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">Veja o exemplo em ação.</a></p> - -<pre class="brush: js">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"); - } -}</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidade entre navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Chrome</th> - <th style="line-height: 16px;">Firefox (Gecko)</th> - <th style="line-height: 16px;">Edge</th> - <th style="line-height: 16px;">Internet Explorer</th> - <th style="line-height: 16px;">Opera</th> - <th style="line-height: 16px;">Safari (WebKit)</th> - </tr> - <tr> - <td><code>construtor Event()</code></td> - <td>15</td> - <td>11</td> - <td>{{CompatVersionUnknown}}</td> - <td>11</td> - <td>11.60</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Android</th> - <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> - <th style="line-height: 16px;">IE Mobile</th> - <th style="line-height: 16px;">Opera Mobile</th> - <th style="line-height: 16px;">Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> |