unslug pt-br: move

1 files changed, 177 insertions, 0 deletions

diff --git a/files/pt-br/web/api/window/domcontentloaded_event/index.html b/files/pt-br/web/api/window/domcontentloaded_event/index.html
new file mode 100644
index 0000000000..eb54671921
--- /dev/null
+++ b/files/pt-br/web/api/window/domcontentloaded_event/index.html
@@ -0,0 +1,177 @@
+---
+title: DOMContentLoaded
+slug: Web/Events/DOMContentLoaded
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<p>O evento <code>DOMContentLoaded</code> é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - deve ser usado apenas para detectar uma página completamente carregada. É um engano comum as pessoas usarem <a href="/en-US/docs/Mozilla_event_reference/load" style="line-height: 19.0909080505371px;"><code>load</code></a><span style="line-height: 19.0909080505371px;"> quando </span><code style="font-style: normal; line-height: 19.0909080505371px;">DOMContentLoaded</code><span style="line-height: 19.0909080505371px;"> seria muito mais apropriado.</span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Javascript Síncrono pausa a análise do DOM.</p>
+</div>
+
+<h2 id="Acelerando" style="line-height: 30px; font-size: 2.14285714285714rem;">Acelerando</h2>
+
+<p>Se você quer que o DOM seja analisado o mais rápido possível após uma requisição do usuário, você deve usar recursos do <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">javascript assíncrono</a> e <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">otimizar o carregamento de folhas de estilo</a> pois, caso contrário, a página será carregada mais lentamente pois muitos itens serão carregados paralelamente, atrasando a visualização da página.</p>
+
+<dl style="line-height: 19.0909080505371px;">
+</dl>
+
+<h2 id="Informações_gerais">Informações gerais</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificação</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propaga</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
+ <dd style="margin: 0 0 0 120px;">Sim (embora especificado como evento simples não-cancelável)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">Document</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação Default</dt>
+ <dd style="margin: 0 0 0 120px;">Nenhuma.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Alvo do evento (O topo do DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Tipo de evento</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>O evento é por padrão bubbles ou não.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>O evento pode ser cancelado ou não.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<h3 id="Básico">Básico</h3>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM completamente carregado e analisado");
+  });
+&lt;/script&gt;
+</pre>
+
+<h3 id="Forçando_o_atraso_do_DOMContentLoaded">Forçando o atraso do DOMContentLoaded</h3>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM completamente carregado e analisado");
+  });
+
+for(var i=0; i&lt;1000000000; i++)
+{} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde.
+&lt;/script&gt;
+</pre>
+
+<p> </p>
+
+<h3 id="Verificando_se_o_carregamento_está_completo">Verificando se o carregamento está completo</h3>
+
+<p><code>DOMContentLoaded</code> pode disparar antes do seu script ser carregado, então é importante validar antes de adicionar um listener.</p>
+
+<pre>function doSomething() {
+  console.info("DOM carregado");
+}
+
+if (document.readyState === "loading") {  // Ainda carregando
+  document.addEventListener("DOMContentLoaded", doSomething);
+} else {  // `DOMContentLoaded` foi disparado
+  doSomething();
+}</pre>
+
+<p> </p>
+
+<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>0.2</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><span style="font-size: 14px; line-height: 18px;">Propagação para este evento é suportada à partir do Gecko 1.9.2, Chrome 6, e Safari 4.</span></p>
+
+<h3 id="Cross-browser_fallback">Cross-browser fallback</h3>
+
+<p>O Internet Explorer 8 suporta o evento <code>readystatechange</code>, que pode ser usado para detectar quando o DOM está pronto. Em versões anteriores do Internet Explorer, este estado pode ser detectado tentando executar <code>document.documentElement.doScroll("left"); </code>repetidas vezes; este comando dará erro repetidamente, até que o DOM esteja pronto.</p>
+
+<p>Há também uma abundância de bibliotecas de propósito geral que oferecem métodos cross-browser para detectar se o DOM está pronto.</p>
+
+<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>