unslug pt-br: move

1 files changed, 322 insertions, 0 deletions

diff --git a/files/pt-br/web/api/eventtarget/addeventlistener/index.html b/files/pt-br/web/api/eventtarget/addeventlistener/index.html
new file mode 100644
index 0000000000..fea1e67e7b
--- /dev/null
+++ b/files/pt-br/web/api/eventtarget/addeventlistener/index.html
@@ -0,0 +1,322 @@
+---
+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>