unslug pt-br: move

7 files changed, 541 insertions, 421 deletions

diff --git a/files/pt-br/web/api/element/accesskey/index.html b/files/pt-br/web/api/element/accesskey/index.html
deleted file mode 100644
index e0425e3645..0000000000
--- a/files/pt-br/web/api/element/accesskey/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: Element.accessKey
-slug: Web/API/Element/accessKey
-translation_of: Web/API/HTMLElement/accessKey
-translation_of_original: Web/API/Element/accessKey
----
-<div>{{APIRef("DOM")}}</div>
-
-<div> </div>
-
-<p>A propriedade <font face="Consolas, Monaco, Andale Mono, monospace"><strong>Element.accessKey</strong></font> define a tecla pelo qual o usuário pode pressionar para saltar para este elemento.</p>
-
-<div class="note">
-<p>Nota: <em>A propriedade <strong>Element.accessKey </strong>é<strong> </strong>raramente usada por causa dos conflitos múltiplos com os atalhos pré-definidos nos navegadores. Para contornar isto, os navegadores implementam o comportamento da tecla de acesso se as teclas são pressionadas com outras teclas "qualificadas" (como Alt + tecla de acesso).</em></p>
-</div>
-
-<p> </p>
-
-<p> </p>
diff --git a/files/pt-br/web/api/element/addeventlistener/index.html b/files/pt-br/web/api/element/addeventlistener/index.html
deleted file mode 100644
index fea1e67e7b..0000000000
--- a/files/pt-br/web/api/element/addeventlistener/index.html
+++ /dev/null
@@ -1,322 +0,0 @@
----
-title: Element.addEventListener()
-slug: Web/API/Element/addEventListener
-translation_of: Web/API/EventTarget/addEventListener
----
-<p>{{apiref("DOM Events")}}</p>
-
-<p><code>addEventListener()</code> registra uma única espera de evento em um único alvo. O <a href="/pt-BR/docs/DOM/EventTarget" title="DOM/EventTarget">alvo do evento</a> pode ser um único <a href="/pt-BR/docs/DOM/element" title="DOM/element">elemento</a> em um documento, o <code><a href="/pt-BR/docs/DOM/document" title="DOM/document">documento</a></code> em si, uma <code><a href="/pt-BR/docs/DOM/window" title="DOM/window">janela</a></code>, ou um <code><a href="/pt-BR/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>.</p>
-
-<p>Para registrar mais de uma espera de evento como alvo, chame <code>addEventListener()</code> para o mesmo alvo mas com diferentes tipos de evento ou captura de parâmetros.</p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<pre class="syntaxbox"><code><em>alvo</em>.addEventListener(<em>type</em>,<em>listener</em>[, <em>options</em>]);
-<em>alvo</em>.addEventListener(<em>type</em>,<em>listener</em>[, <em>useCapture</em>, <em>wantUntrusted </em>{{ Non-standard_inline() }}]); // Gecko/Mozilla only</code></pre>
-
-<dl>
- <dt><code>type</code></dt>
- <dd>Uma linha de texto que representa o <a class="internal" href="/pt-BR/docs/DOM/event.type" title="DOM/Event.type">tipo de evento</a> a ser esperado.</dd>
- <dt>listener</dt>
- <dd>O objeto que recebe uma notificação quando um evento do tipo especificado ocorre. Esse objeto precisa implementar a interface do <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListener</code></a>, ou simplesmente executar uma <a href="/pt-BR/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">função</a> JavaScript.</dd>
- <dt><code>useCapture</code> {{ optional_inline() }}</dt>
- <dd>Se <code>true</code>, <code>useCapture</code> indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à <code>listener</code> registrada antes de serem enviados à qualquer <code>EventTarget</code> abaixo dela na hierarquia de DOMs. Eventos que borbulharem para cima na hierarquia não acionarão a escuta designada  a usar a captura. Veja <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">Eventos DOM Nível 3</a> para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, <code>useCapture</code> é <code>false</code>.</dd>
- <dt><code>wantsUntrusted</code> {{ Non-standard_inline() }}</dt>
- <dd>Se <code>true</code>, o evento pode ser acionado por conteúdo não-confiável. Veja <a href="/pt-BR/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">Interação entre páginas com e sem privilégios</a>.</dd>
-</dl>
-
-<div class="note"><strong>Nota:</strong> <code>useCapture</code> tornou-se opcional somente nas versões mais recentes dos principais navegadores; não era opcional antes do Firefox 6, por exemplo. Você deve especificar esse parâmetro para obter uma maior compatibilidade.</div>
-
-
-<h2 id="Exemplo">Exemplo</h2>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;Exemplo de Evento DOM&lt;/title&gt;
-
-&lt;style&gt;
-#t { border: 1px solid red }
-#t1 { background-color: pink; }
-&lt;/style&gt;
-
-&lt;script&gt;
-// Função para mudar o conteúdo de t2
-function modifyText() {
-  var t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = "three";
-}
-
-// Função para adicionar uma espera de evento em t
-function load() {
-  var el = document.getElementById("t");
-  el.addEventListener("click", modifyText, false);
-}
-
-document.addEventListener("DOMContentLoaded", load, false);
-&lt;/script&gt;
-
-&lt;/head&gt;
-&lt;body&gt;
-
-&lt;table id="t"&gt;
-   &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
-   &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
-&lt;/table&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p><a href="https://jsfiddle.net/madBYK/UumUP">View on JSFiddle</a></p>
-
-<p>No exemplo acima, <code>modifyText()</code> é uma escuta para eventos de <code>click</code> registrados usando <code>addEventListener()</code>. Um clique em qualquer lugar da tabela irá borbulhar para cima até o manipulador e executar <code>modifyText()</code>.</p>
-
-<p>Se você deseja passar parâmetros para a função de escuta, você deve usar uma função anônima.</p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;Exemplo de Evento DOM&lt;/title&gt;
-
-&lt;style&gt;
-#t { border: 1px solid red }
-#t1 { background-color: pink; }
-&lt;/style&gt;
-
-&lt;script&gt;
-
-// Função para mudar o conteúdo de t2
-function modifyText(new_text) {
-  var t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = new_text;
-}
-
-// Função para adicionar uma espera de evento em t
-function load() {
-  var el = document.getElementById("t");
-  el.addEventListener("click", function(){modifyText("four")}, false);
-}
-&lt;/script&gt;
-
-&lt;/head&gt;
-&lt;body onload="load();"&gt;
-
-&lt;table id="t"&gt;
-  &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
-  &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
-&lt;/table&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h2 id="Notas">Notas</h2>
-
-<h3 id="Por_que_usar_addEventListener">Por que usar <code>addEventListener</code>?</h3>
-
-<p><code>addEventListener</code> é a maneira de registrar uma espera de evento como especificada no W3C DOM. Seus benefícios são os seguintes:</p>
-
-<ul>
- <li>Permite mais de um manipulador por evento. Isso é particularmente útil em bibliotecas <a href="/pt-BR/docs/DHTML" style="line-height: normal;" title="DHTML">DHTML</a> ou em <a href="/pt-BR/docs/Extensions" style="line-height: normal;" title="Extensions">extensões Mozilla</a> que precisam trabalhar bem mesmo com outras bibliotecas/extensões sendo usadas.</li>
- <li>Te dá um pente-fino do estágio em que a espera de evento é ativada (captura ou borbulha).</li>
- <li>Funciona em qualquer elemento DOM, não só para elementos HTML.</li>
-</ul>
-
-<p>Existe outra alternativa, <a href="#Older_way_to_register_event_listeners">uma maneira ultrapassada de registrar esperas de evento</a>.</p>
-
-<h3 id="Adicionando_uma_espera_de_evento_durante_um_disparo_de_evento"><strong>Adicionando uma espera de evento durante um disparo de evento</strong></h3>
-
-<p>Se um EventListener for somado a um EventTarget enquanto está processando um evento, ele não será ativado pelas ações atuais, mas poderá ser ativado em um período posterior no fluxo de eventos, como na fase de borbulha.</p>
-
-<h3 id="Múltiplas_esperas_de_evento_idênticas"><strong>Múltiplas esperas de evento idênticas</strong></h3>
-
-<p>Se múltiplas esperas de evento idênticas forem registradas no mesmo EventTarget com os mesmos parâmetros, as versões duplicadas serão descartadas. Elas não fazem o EventListener ser disparado mais de uma vez, e, como as duplicatas são descartadas, elas não precisam ser removidas manualmente com o método <a href="https://developer.mozilla.org/pt-BR/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a>.</p>
-
-<h3 id="O_valor_de_this_no_manipulador"><strong>O valor de </strong><strong>this</strong><strong> no manipulador</strong></h3>
-
-<p>É preferível referenciar o elemento do qual a espera de evento foi disparada, como quando é usado um manipulador genérico para uma série de elementos similares. Quando anexar uma função usando addEventListener(), o valor de this é mudado — perceba que o valor de this é passado para uma função a partir do disparador.</p>
-
-<p>Nos exemplos acima, o valor de this em modifyText(), quando disparado pelo evento de clique, é uma referência à tabela 't'. Isso é um contraste do comportamento que acontece se o manipulador é adicionado ao HTML fonte:</p>
-
-<pre class="brush: html">&lt;table id="t" onclick="modifyText();"&gt;
-  . . .</pre>
-
-<p>O valor de this em modifyText(), quando disparado pelo evento de clique no HTML, será uma referência ao objeto global (no caso, a janela).</p>
-
-<div class="note"><strong>Nota:</strong> JavaScript 1.8.5 introduz o método <code><a href="/pt-BR/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code>, que permite especificar o valor que deve ser usado como <code>this</code> para todas as chamadas à uma determinada função. Isso evita problemas quando não é claro o que <code>this</code> será, dependendo do contexto do qual a sua função for chamada. Perceba, entretanto, que é preciso manter uma referência da escuta à mão, para que depois você possa removê-la.</div>
-
-<p>Este é um exemplo com e sem <code>bind</code>:</p>
-
-<pre class="brush: js">var Algo = function(elemento)
-{
-  this.nome = 'Algo bom';
-  this.onclick1 = function(evento) {
-    console.log(this.nome); // indefinido, porque this é a função de escuta do clique
-  };
-  this.onclick2 = function(evento) {
-    console.log(this.nome); // 'Algo bom', porque this está como objeto Algo através do bind
-  };
-  elemento.addEventListener('click', this.onclick1, false);
-  elemento.addEventListener('click', this.onclick2.bind(this), false); // Truque de bind
-}
-</pre>
-
-<p>Outra solução é usar uma função especial chamada <code>handleEvent</code> para capturar quaisquer eventos:</p>
-
-<pre class="brush: js">var Algo = function(elemento)
-{
-  this.nome = 'Algo bom';
-  this.handleEvent = function(evento) {
-    console.log(this.nome); // 'Algo bom', porque this é o objeto Algo
-    switch(evento.type) {
-      case 'click':
-        // seu codigo aqui...
-        break;
-      case 'dblclick':
-        // seu codigo aqui...
-        break;
-    }
-  };
-  elemento.addEventListener('click', this, false); // Não this.handleEvent, só this
-  elemento.addEventListener('dblclick', this, false); // Não this.handleEvent, só this
-}
-</pre>
-
-<h3 id="Internet_Explorer_antigos_e_attachEvent">Internet Explorer antigos e attachEvent</h3>
-
-<p>Em versões do Internet Explorer anteriores ao IE9, você precisa usar <code><a class="external" href="http://msdn.microsoft.com/pt-BR/library/ms536343(VS.85).aspx">attachEvent</a></code> em vez do padrão <code>addEventListener</code>. Para dar suporte ao IE, o exemplo acima pode ser modificado para:</p>
-
-<pre class="brush: js">if (el.addEventListener) {
-  el.addEventListener('click', modifyText, false);
-} else if (el.attachEvent)  {
-  el.attachEvent('onclick', modifyText);
-}
-</pre>
-
-<p>Existe um porém com <code>attachEvent:</code> o valor de <code>this</code> será a referência ao objeto <code>window</code> em vez do elemento do qual foi disparado.</p>
-
-<h3 id="Uma_maneira_ultrapassada_de_registrar_esperas_de_evento">Uma maneira ultrapassada de registrar esperas de evento</h3>
-
-<p><code>addEventListener()</code> foi introduzido com as especificações de <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Eventos</a> DOM 2. Antes disso, esperas de evento eram registradas assim:</p>
-
-<pre class="brush: js">// Passe uma função de referência — não adicione '()' depois dela, o que chamaria a função!
-el.onclick = modifyText;
-
-// Usando uma expressão de função
-element.onclick = function() {
-    // ... lógica da função ...
-};
-</pre>
-
-<p>Esse método substitui as esperar de evento de <code>click</code> no elemento, se houve alguma. Igualmente para outros outros eventos e manipuladores de evento associados, como <code>blur</code> (<code>onblur</code>), <code>keypress</code> (<code>onkeypress</code>), e assim por diante.</p>
-
-<p>Porque era essencialmente uma parte do DOM 0, esse método era largamente suportado e não necessitava de códigos entre-navegadores especiais; logo é normalmente usado para registrar esperas de evento dinâmicamente, a menos que atributos extras do <code>addEventListener()</code> sejam necessários.</p>
-
-<h3 id="Problemas_de_memória">Problemas de memória</h3>
-
-<pre class="brush: js">var i;
-var els = document.getElementsByTagName('*');
-
-// Caso 1
-for(i=0 ; i&lt;els.length ; i++){
-  els[i].addEventListener("click", function(e){/*fazer algo*/}, false});
-}
-
-// Caso 2
-function processarEvento(e){
-  /*fazer algo*/
-}
-
-for(i=0 ; i&lt;els.length ; i++){
-  els[i].addEventListener("click", processarEvento, false});
-}
-
-</pre>
-
-<p>No primeiro caso, uma nova função (anônima) é criada em cada turno do loop. No segundo caso, a mesma função previamente declarada é usada como um manipulador de evento. Isso resulta em um consumo menor de memória. Além do mais, no primeiro caso, já que nenhuma referência à função anônima é mantida, não é possível chamar <code><a href="/pt-BR/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener</a></code> porque não há uma referência ao manipulador, enquanto no segundo caso é possível fazer <code>myElement.removeEventListener("click", processEvent, false)</code>.</p>
-
-<h2 id="Compatiblidade_de_navegadores">Compatiblidade de 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 (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>1.0</td>
-   <td>{{ CompatGeckoDesktop(1.0) }}</td>
-   <td>9.0</td>
-   <td>7</td>
-   <td>1.0</td>
-  </tr>
-  <tr>
-   <td><code>useCapture</code> é opcional</td>
-   <td>1.0</td>
-   <td>6.0</td>
-   <td>9.0</td>
-   <td>11.60</td>
-   <td>{{ CompatVersionUnknown() }}</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>1.0</td>
-   <td>{{ CompatGeckoMobile(1.0) }}</td>
-   <td>9.0</td>
-   <td>6.0</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h4 id="Notas_Gecko">Notas Gecko</h4>
-
-<ul>
- <li>Antes do Firefox 6, o navegador daria um erro se o parâmetro <code>useCapture</code> não fosse especificado <code>false</code>. Antes do Gecko 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> daria um erro se o parâmetro <code>escuta</code> fosse <code>null</code>; agora o método retorna sem erros, mas também sem fazer nada.</li>
-</ul>
-
-<h4 id="Notas_Webkit">Notas Webkit</h4>
-
-<ul>
- <li>Apesar do WebKit ter explicitamente adicionado <code>[optional]</code> ao parâmetro <code>useCapture </code><a class="external" href="http://trac.webkit.org/changeset/89781">como recentemente anunciado em Junho de 2011</a>, já funcionava antes do anúncio da mudança. Ela foi anunciada no Safari 5.1 e no Chrome 13.</li>
-</ul>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li><a href="/pt-BR/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">elemento.removeEventListener()</a></li>
- <li><a href="/pt-BR/docs/DOM/Creating_and_triggering_events" title="DOM/Creating_and_triggering_custom_events">Criando e disparando eventos customizáveis</a></li>
- <li><a class="external" href="http://www.quirksmode.org/js/this.html" title="http://www.quirksmode.org/js/this.html">Mais detalhes no uso de <code>this</code> nos manipuladores de eventos</a></li>
-</ul>
-
-<h2 id="Especificação">Especificação</h2>
-
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">Eventos DOM Nível 2: EventTarget.addEventListener</a></li>
- <li><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener">Eventos DOM Nível 3: EventTarget.addEventListener</a></li>
-</ul>
diff --git a/files/pt-br/web/api/element/blur_event/index.html b/files/pt-br/web/api/element/blur_event/index.html
new file mode 100644
index 0000000000..7eb9263be2
--- /dev/null
+++ b/files/pt-br/web/api/element/blur_event/index.html
@@ -0,0 +1,154 @@
+---
+title: blur (evento)
+slug: Web/Events/blur
+translation_of: Web/API/Element/blur_event
+---
+<p>O evento <code>blur</code> é acionado quando um elemento perde foco. A diferença principal entre este evento e <a href="/en-US/docs/Mozilla_event_reference/focusout"><code>focusout</code></a> é que apenas o segundo 'borbulha'.</p>
+
+<h2 id="Informação_geral">Informação geral</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.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Borbulha</dt>
+ <dd style="margin: 0 0 0 120px;">Não</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
+ <dd style="margin: 0 0 0 120px;">Não</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">Elemento</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação padrão</dt>
+ <dd style="margin: 0 0 0 120px;">Nenhuma</dd>
+</dl>
+
+<p>{{NoteStart}}O valor de {{domxref("Document.activeElement")}} varia entre navegadores enquanto este evento é processado ({{bug(452307)}}): O IE10 define-o para o elemento para onde o foco moverá, enquanto Firefox e Chrome muitas vezes definem-o para o <code>body</code> do documento.{{NoteEnd}}</p>
+
+<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>Event target (DOM element)</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>null</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Delegação_do_evento">Delegação do evento</h2>
+
+<p>Existem duas maneiras de implementar a delegação de eventos para este evento: usando o evento <code>focusout</code> nos navegadores que suportam-o, ou definindo o parâmetro "useCapture" do <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> para <code>true</code>:</p>
+
+<h3 id="Conteúdo_HTML">Conteúdo HTML </h3>
+
+<pre class="brush:html;">&lt;form id="form"&gt;
+  &lt;input type="text" placeholder="text input"&gt;
+  &lt;input type="password" placeholder="password"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Conteúdo_JavaScript">Conteúdo JavaScript</h3>
+
+<pre class="brush: js">var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);</pre>
+
+<p>{{EmbedLiveSample('Event_delegation')}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>6</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</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>4.0</td>
+   <td>53</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes do Gecko 24 {{geckoRelease(24)}} a interface para este elemento era {{domxref("Event")}}, não {{domxref("FocusEvent")}}. Veja ({{bug(855741)}}).</p>
+
+<h2 id="Eventos_relacionados">Eventos relacionados</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/focus_event/index.html b/files/pt-br/web/api/element/focus_event/index.html
new file mode 100644
index 0000000000..9f6dd7117d
--- /dev/null
+++ b/files/pt-br/web/api/element/focus_event/index.html
@@ -0,0 +1,137 @@
+---
+title: focus
+slug: Web/Events/focus
+translation_of: Web/API/Element/focus_event
+---
+<p>O evento <code>focus</code> é acionado assim que um elemento recebe um foco. O grande diferencial entre este evento e o evento <a href="/en-US/docs/Mozilla_event_reference/focusin"><code>focusin</code></a>, é que esse segundo "borbulha".</p>
+
+<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.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{ domxref("FocusEvent") }}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Borbulha</dt>
+ <dd style="margin: 0 0 0 120px;">Não</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
+ <dd style="margin: 0 0 0 120px;">Não</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt>
+ <dd style="margin: 0 0 0 120px;">Nenhuma.</dd>
+</dl>
+
+<div class="note">Note: The interface was {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})</div>
+
+<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>Event target (DOM element)</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>null</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventos_Delegados">Eventos Delegados</h2>
+
+<p>Existem 2 maneiras diferentes de implementações delegados a partir de um evento: por meio da utilização do evento  <code>focusin</code> que todos os browsers atuais suportam tão tecnologia (todos exceto o Firefox), ou por setando o parâmetro "useCapture" do elemento  <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a>  como <code>true</code>:</p>
+
+<p>{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}</p>
+
+<p>(Exemplo de codigo do evento <a href="/en-US/docs/Web/Events/blur">blur (event)</a>)</p>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Eventos_Relacionais">Eventos Relacionais</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/focusin_event/index.html b/files/pt-br/web/api/element/focusin_event/index.html
new file mode 100644
index 0000000000..797424de54
--- /dev/null
+++ b/files/pt-br/web/api/element/focusin_event/index.html
@@ -0,0 +1,125 @@
+---
+title: focusin
+slug: Web/Events/focusin
+translation_of: Web/API/Element/focusin_event
+---
+<p>O evento <code>focusin</code> é acionado no momento em que o elemento receba o foco. A grande diferença entre esse evento e o evento  <code><a href="/en-US/docs/Mozilla_event_reference/focus_(event)">focus</a></code>, é que apenas o <code>focusin</code> delega o seu evento para o elemento pai (conhecido como bubbling ou deletegate).</p>
+
+<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.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Borbulha</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;">Não</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</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>Event target losing focus.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>Event target receiving focus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_Demais_Navegadores">Compatibilidade com Demais Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Eventos_Relacionais">Eventos Relacionais</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/focusout_event/index.html b/files/pt-br/web/api/element/focusout_event/index.html
new file mode 100644
index 0000000000..8f72b211b2
--- /dev/null
+++ b/files/pt-br/web/api/element/focusout_event/index.html
@@ -0,0 +1,125 @@
+---
+title: focusout
+slug: Web/Events/focusout
+translation_of: Web/API/Element/focusout_event
+---
+<p>O evento <code>focusout</code> é acionado assim que o elemento perde o foco. A principal diferença entre esse evento e o evento <code><a href="/en-US/docs/Mozilla_event_reference/blur_(event)">blur</a></code>, é que esse ultimo não gera "borbulhas".</p>
+
+<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.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Borbulha</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;">Não</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</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>Event target losing focus.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>Event target receiving focus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Eventos_Relcionados">Eventos Relcionados</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/name/index.html b/files/pt-br/web/api/element/name/index.html
deleted file mode 100644
index 93f5faee9a..0000000000
--- a/files/pt-br/web/api/element/name/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Element.name
-slug: Web/API/Element/name
-tags:
-  - API
-  - DOM
-  - Element
-  - NeedsBrowserCompatibility
-  - NeedsUpdate
-  - Property
-  - Reference
-  - Web
-translation_of: Web/API
-translation_of_original: Web/API/Element/name
----
-<p>{{ APIRef("DOM") }}</p>
-
-<h2 id="Summary" name="Summary">Summary</h2>
-
-<p><code><strong>name</strong></code> recebe ou ajusta uma propriedade name de um objeto do DOM; ele se aplica somente aos seguintes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} e {{ HTMLelement("textarea") }}.</p>
-
-<div class="note">
-<p><strong>Nota:</strong> A propriedade <code>name</code> não existe para outros elementos; diferente de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> e <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p>
-</div>
-
-<p><code>name</code> pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> ou com uma coleção de elementos de formulário. Ela pode retornar um único elemento ou uma coleção quando usada com um formulário ou elementos de coleção.</p>
-
-<h2 id="Syntax" name="Syntax">Sintaxe</h2>
-
-<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>;
-var elName = <em>HTMLElement</em>.name;
-
-var fControl = <em>HTMLFormElement</em>.<em>elementName</em>;
-var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>;
-</pre>
-
-<h2 id="Example" name="Example">Exemplo</h2>
-
-<pre class="eval">&lt;form action="" name="formA"&gt;
-  &lt;input type="text" value="foo"&gt;
-&lt;/form&gt;
-
-&lt;script type="text/javascript"&gt;
-
-  // Recebe uma referência ao primeiro elemento no formulário
-  var formElement = document.forms['formA'].elements[0];
-
-  // Fornece um name a ele
-  formElement.name = 'inputA';
-
-  // Exibe o valor do input
-  alert(document.forms['formA'].elements['inputA'].value);
-
-&lt;/script&gt;
-</pre>
-
-<h2 id="Notes" name="Notes">Notas</h2>
-
-<p>No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade <code>name</code> de objetos do DOM criados com {{ domxref("document.createElement()") }}.</p>
-
-<h2 id="Specification" name="Specification">Especificação</h2>
-
-<p>Especificação W3C DOM 2 HTML:</p>
-
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li>
-</ul>