diff options
Diffstat (limited to 'files/pt-br/web/api/eventtarget')
4 files changed, 375 insertions, 0 deletions
diff --git a/files/pt-br/web/api/eventtarget/dispatchevent/index.html b/files/pt-br/web/api/eventtarget/dispatchevent/index.html new file mode 100644 index 0000000000..75b633642b --- /dev/null +++ b/files/pt-br/web/api/eventtarget/dispatchevent/index.html @@ -0,0 +1,43 @@ +--- +title: EventTarget.dispatchEvent() +slug: Web/API/EventTarget/dispatchEvent +tags: + - API + - DOM + - Gecko + - Method + - events +translation_of: Web/API/EventTarget/dispatchEvent +--- +<p>{{APIRef("DOM Events")}}</p> + +<p>Dispara um {{domxref("Event")}} para o {{domxref("EventTarget")}} especificado, invocando os {{domxref("EventListener")}}s especificados, em uma ordem apropriada. O processamento normal das regras (including the capturing and optional bubbling phase) aplica-se a eventos disparados manualmente com <code>dispatchEvent()</code>.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>) +</pre> + +<ul> + <li><code>event</code> é o objeto {{domxref("Event")}} a ser disparado.</li> + <li><code>target</code> é utilizado para inicializar o {{domxref("Event", "", "target")}} e determinar quais event listeners serão <span class="traducaoContextual">invocados.</span></li> + <li>O valor retornado é <code>false</code> se ao menos um dos event handlers o qual manipulou o evento chamou {{domxref("Event.preventDefault()")}}. De outro modo, isto retorna <code>true</code>.</li> +</ul> + +<p>O método <code>dispatchEvent joga</code> <code>UNSPECIFIED_EVENT_TYPE_ERR</code> se o tipo do evento não foi especificado pela inicialização do evento antes do método ser chamado, ou se o tipo do evento for is <code>null</code> ou uma string vazia. Exceções jogadas por event handlers são reportadas como exceções não-capturáveis; os event handlers são executados em uma callstack aninhada; eles bloqueiam o chamador até que a rotina tenha sido totalmente executada, mas as execeções não se propagam para o chamador.</p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p><code>dispatchEvent</code> é a última fase do processo create-init-dispatch, a qual é usada para disparar eventos na implementação do event model. O evento pode ser criado utilizando o método <a href="/en-US/docs/DOM/document.createEvent" title="DOM/document.createEvent">document.createEvent</a> e pode ser inicializado com <a href="/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">initEvent</a> ou outro método de inicialização mais específico, como <a href="/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">initMouseEvent</a> ou <a href="/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">initUIEvent</a>.</p> + +<p>Veja também a <a href="/en-US/docs/DOM/event" title="DOM/event">referência Event object</a>.</p> + +<h2 id="Example" name="Example">Exemplo</h2> + +<p>Veja <a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events" title="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering events</a>.</p> + +<h2 id="Specification" name="Specification">Especificações</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent">DOM Level 2 Events: dispatchEvent</a></li> +</ul> diff --git a/files/pt-br/web/api/eventtarget/eventtarget/index.html b/files/pt-br/web/api/eventtarget/eventtarget/index.html new file mode 100644 index 0000000000..0ce5aa4363 --- /dev/null +++ b/files/pt-br/web/api/eventtarget/eventtarget/index.html @@ -0,0 +1,70 @@ +--- +title: EventTarget() +slug: Web/API/EventTarget/EventTarget +translation_of: Web/API/EventTarget/EventTarget +--- +<div>{{APIRef("DOM Events")}}</div> + +<p>O construtor <code><strong>EventTarget()</strong></code> cria uma nova instância do objeto {{domxref("EventTarget")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">var <var>myEventTarget</var> = new EventTarget();</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<p>Nenhum.</p> + +<h3 id="Retorno_de_valor">Retorno de valor</h3> + +<p>Uma instância do objeto {{domxref("EventTarget")}}.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: js" id="ct-20">class MyEventTarget extends EventTarget { + constructor(mySecret) { + super(); + this._secret = mySecret; + } + + get secret() { return this._secret; } +}; + +let myEventTarget = new MyEventTarget(5); +let value = myEventTarget.secret; // == 5 +myEventTarget.addEventListener("foo", function(e) { + this._secret = e.detail; +}); + +let event = new CustomEvent("foo", { detail: 7 }); +myEventTarget.dispatchEvent(event); +let newValue = myEventTarget.secret; // == 7</pre> + +<h2 id="Specificações">Specificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("api.EventTarget.EventTarget")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("EventTarget")}}</li> +</ul> diff --git a/files/pt-br/web/api/eventtarget/index.html b/files/pt-br/web/api/eventtarget/index.html new file mode 100644 index 0000000000..c1eb84c9f0 --- /dev/null +++ b/files/pt-br/web/api/eventtarget/index.html @@ -0,0 +1,124 @@ +--- +title: EventTarget +slug: Web/API/EventTarget +tags: + - API + - DOM + - DOM Events + - Interface +translation_of: Web/API/EventTarget +--- +<p>{{ ApiRef("DOM Events") }}</p> + +<h2 id="Resumo">Resumo</h2> + +<p><code>EventTarget</code> é uma interface DOM implementada por objetos que podem receber eventos DOM e tem que ouvir estes.</p> + +<p>{{domxref("Element")}}, {{domxref("document")}}, e {{domxref("window")}} são os mais comuns disparadores de eventos, mas outros objetos podem disparar eventos também, por exemplo {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}} e outros.</p> + +<p>Muitos disparadores de eventos (incluindo elements, documents, e windows) também suportam definir <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">event handlers</a> através <code>on...</code> propriedades e atributos.</p> + +<h2 id="Methods" name="Methods">Métodos</h2> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Registra um tratamento para um tipo específico de evento sobre o <code>EventTarget</code>.</dd> + <dt>{{domxref("EventTarget.removeEventListener()")}}</dt> + <dd>Remove um <em>event listener</em> do <code>EventTarget</code>.</dd> + <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt> + <dd>Dispatch an event to this <code>EventTarget</code>.</dd> +</dl> + +<h2 id="Specification" name="Specification">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Sem mundanças.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>Alguns parâmetros agora são opcionais (<code>listener</code>), ou aceitam o valor <code>null</code> (<code>useCapture</code>).</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td> + <td>{{Spec2('DOM2 Events')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade entre navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</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") }}</td> + <td>9.0</td> + <td>7</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</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") }}</td> + <td>9.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Additional_methods_for_Mozilla_chrome_code">Additional methods for Mozilla chrome code</h3> + +<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/en-US/docs/Mozilla/WebIDL_bindings" title="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p> + +<ul> + <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{ non-standard_inline() }}</li> + <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{ non-standard_inline() }}</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/Reference/Events" title="/en-US/docs/Web/Reference/Events">Referência de eventos</a> - os eventos disponíveis na plataforma.</li> + <li><a href="/pt-BR/docs/Web/Guide/DOM/Events" title="/en-US/docs/Web/Guide/DOM/Events">Guia do desenvolvedor sobre Eventos</a></li> + <li>Interface {{domxref("Event")}}</li> +</ul> diff --git a/files/pt-br/web/api/eventtarget/removeeventlistener/index.html b/files/pt-br/web/api/eventtarget/removeeventlistener/index.html new file mode 100644 index 0000000000..dc558d006f --- /dev/null +++ b/files/pt-br/web/api/eventtarget/removeeventlistener/index.html @@ -0,0 +1,138 @@ +--- +title: EventTarget.removeEventListener() +slug: Web/API/EventTarget/removeEventListener +tags: + - API + - DOM + - Gecko + - JavaScript + - Method + - events +translation_of: Web/API/EventTarget/removeEventListener +--- +<p>{{APIRef("DOM Events")}}</p> + +<p>Remove o event listener anteriormente registrado com {{domxref("EventTarget.addEventListener()")}}.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>])</pre> + +<dl> + <dt><code>type</code></dt> + <dd>Uma string indicando o tipo de evento a ser removido.</dd> + <dt><code>listener</code></dt> + <dd>A função {{ domxref("EventListener") }} a ser removida do event target.</dd> + <dt><code>useCapture</code> {{ optional_inline() }}</dt> + <dd>Indica quando o {{ domxref("EventListener") }} a ser removido foi registrado ou não como <em>capturing listener</em>. Caso este parâmetro seja omitido, o valor <em>false</em> será assumido por padrão.</dd> + <dd>Se um listener foi registrado duas vezes, uma com o parâmetro <em>capture</em> especificado e outra sem, cada um deve ser removido separadamente. A remoção de um <em>capturing listener</em> não afeta a versão <em>non-capturing</em> do mesmo listener, e vice versa.</dd> +</dl> + +<div class="note"><strong>Nota:</strong> <code>useCapture</code> era obrigatório em versões mais antigas dos navegadores. Para ampla compatibilidade, sempre informe o parâmetro <code>useCapture.</code></div> + +<h2 id="Compatibility" name="Compatibility">Notas</h2> + +<p>Se um {{ domxref("EventListener") }} é removido de um {{ domxref("EventTarget") }} enquanto <u><em>este</em></u> está processando um evento, esse não será disparado pelas <em>current actions</em>. Um {{ domxref("EventListener") }} não será invocado para o evento o qual foi registrado depois de ter sido removido, porém pode ser registrado novamente.</p> + +<p>Chamar <code>removeEventListener()</code> com argumentos que não identifiquem nenhum {{ domxref("EventListener") }} registrado no <code>EventTarget</code> não tem qualquer efeito.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Este é um exemplo de como associar e remover um event listener.</p> + +<pre class="brush: js">var div = document.getElementById('div'); +var listener = function (event) { + /* faça alguma coisa... */ +}; +div.addEventListener('click', listener, false); +div.removeEventListener('click', listener, false); +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade entre navegadores</h2> + +<p>{{Compat("api.EventTarget.removeEventListener", 3)}}</p> + + + +<h3 id="Notas_para_Gecko">Notas para Gecko</h3> + +<ul> + <li>Antes do Firefox 6, o navegador poderia retornar um erro se o parâmetro <code>useCapture não estive explicitamente cofigurado como</code> <font face="'Courier New', 'Andale Mono', monospace"><span style="line-height: normal;">false</span></font>. Antes do Gecko 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> retornaria uma exception se o parâmetro do listener fosse <code>null</code>; agora o método retorna sem erros, mas sem fazer nada.</li> +</ul> + +<h3 id="Notas_para_Opera">Notas para Opera</h3> + +<ul> + <li>Opera 12.00 fez com que o uso de <code>useCapture</code> seja opcional (<a class="external" href="http://my.opera.com/ODIN/blog/2011/09/29/what-s-new-in-opera-development-snapshots-28-september-2011-edition">source</a>).</li> +</ul> + +<h3 id="Notas_para_WebKit">Notas para WebKit</h3> + +<ul> + <li>Embora o WebKit tenha adicionado explicitamente "<code>[optional]</code>" ao parâmetro <code>useCapture</code> para Safari 5.1 e Chrome 13, isto já funcionava antes da mudança.</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<p>{{ domxref("EventTarget.addEventListener()") }}.</p> + +<h3 id="Specification" name="Specification">Especificação</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-removeEventListener">removeEventListener </a></li> +</ul> + +<h2 id="Polyfill_para_oferecer_suporte_aos_navegadores_antigos">Polyfill para oferecer suporte aos navegadores antigos</h2> + +<p><code>addEventListener()</code> e <code>removeEventListener()</code> não estão presentes em navegadores antigos. Isto pode ser contornado se você inserir o código abaixo no início dos seus scripts, permitindo o uso de <code>addEventListener()</code> e <code>removeEventListener()</code> em implementações as quais não oferecem suporte nativo. Entretanto, este método não funciona para o Internet Explorer 7 ou versões anteriores, uma vez que não era possível extender o Element.prototype até o Internet Explorer 8.</p> + +<pre class="brush: js">if (!Element.prototype.addEventListener) { + var oListeners = {}; + function runListeners(oEvent) { + if (!oEvent) { oEvent = window.event; } + for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) { + if (oEvtListeners.aEls[iElId] === this) { + for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); } + break; + } + } + } + Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) { + if (oListeners.hasOwnProperty(sEventType)) { + var oEvtListeners = oListeners[sEventType]; + for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) { + if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; } + } + if (nElIdx === -1) { + oEvtListeners.aEls.push(this); + oEvtListeners.aEvts.push([fListener]); + this["on" + sEventType] = runListeners; + } else { + var aElListeners = oEvtListeners.aEvts[nElIdx]; + if (this["on" + sEventType] !== runListeners) { + aElListeners.splice(0); + this["on" + sEventType] = runListeners; + } + for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) { + if (aElListeners[iLstId] === fListener) { return; } + } + aElListeners.push(fListener); + } + } else { + oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] }; + this["on" + sEventType] = runListeners; + } + }; + Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) { + if (!oListeners.hasOwnProperty(sEventType)) { return; } + var oEvtListeners = oListeners[sEventType]; + for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) { + if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; } + } + if (nElIdx === -1) { return; } + for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) { + if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); } + } + }; +} +</pre> |