diff options
author | MDN <actions@users.noreply.github.com> | 2021-04-21 00:11:44 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-04-21 00:11:44 +0000 |
commit | de630426a538c1f77d7c59e66827cb75693ed95b (patch) | |
tree | ff14c2d2677ed2137a84d3c322fa2f62e206e63a /files/pt-br/web/api | |
parent | d7a27823444dc11c7ff40ca63a78b3b37ab82837 (diff) | |
download | translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.tar.gz translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.tar.bz2 translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.zip |
[CRON] sync translated content
Diffstat (limited to 'files/pt-br/web/api')
-rw-r--r-- | files/pt-br/web/api/document_object_model/events/index.html | 83 |
1 files changed, 0 insertions, 83 deletions
diff --git a/files/pt-br/web/api/document_object_model/events/index.html b/files/pt-br/web/api/document_object_model/events/index.html deleted file mode 100644 index cd82ef8b39..0000000000 --- a/files/pt-br/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Events and the DOM -slug: Web/API/Document_Object_Model/Events -translation_of: Web/API/Document_Object_Model/Events -original_slug: DOM/Referencia_do_DOM/Events ---- -<div>{{DefaultAPISidebar("DOM")}}</div> - -<h2 id="Introduction" name="Introduction">Introdução</h2> - -<p>Este capítulo descreve o Modelo de Eventos do DOM. A interface de <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event" rel="noopener">Eventos</a> é descrita, assim como a interface para registro de eventos em nodes(ou nódulos) no DOM, e <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listeners</a>, e vários outros exemplos que mostram como diversas interfaces de evento se relacionam uma com a outraThere is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p> - -<p>Existe um excelente diagrama que explica claramente as três fases do percurso de eventos no DOM em <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture" rel="noopener">DOM Level 3 Events draft</a>.</p> - -<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando event listeners</h2> - -<p>Existem 3 formas de registrar uma manipulação de eventos para um elemento DOM.</p> - -<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> - -<pre class="brush: js notranslate">// Assuming myButton is a button element -myButton.addEventListener('click', greet, false) -function greet(event){ - // print and have a look at the event object - // always print arguments in case of overlooking any other arguments - console.log('greet:', arguments) - alert('hello world') -} -</pre> - -<p>Este é o método que você deve usar em páginas web modernas.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> Internet Explorer 6–8 não suportavam este método, oferecendo uma API {{domxref("EventTarget.attachEvent")}} parecida no lugar. Para compatibilidade cross-browser, use uma das muitas bibliotecas JavaScript disponíveis.</p> -</div> - -<p>Mais detalhes podem encontrada na página de referência {{domxref("EventTarget.addEventListener")}}.</p> - -<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">atributo HTML</a></h3> - -<pre class="brush: html notranslate"><button onclick="alert('Hello world!')"> -</pre> - -<p>O código JavaScript no atributo é passado para o objeto Evento através do parâmetro <code>event</code> . <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">O valor return é tratado de uma maneira especial, descrita na especificação HTML.</a></p> - -<div class="blockIndicator warning"> -<p><strong>Cuidado:</strong> Este método deve ser evitado! Ele suja a marcação, e a faz menos legível. Preocupações com o conteúdo/estrutura e comportamento não são bem separadas, tornando mais díficil encontrar um bug.</p> -</div> - -<h3 id="DOM_element_properties" name="DOM_element_properties">DOM element properties</h3> - -<pre class="brush: js notranslate">// Supondo que myButton seja um elemento button -myButton.onclick = function(event){alert('Hello world')} -</pre> - -<p>A função pode ser definida para receber um parâmetro <code>event</code> . <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">O valor return é tratado de maneira especial, descrita na especificação HTML.</a></p> - -<p>O problema deste método é que apenas uma manipulação pode ser definida por elemento e por evento.</p> - -<h2 id="Acessando_interfaces_doEvento">Acessando interfaces doEvento</h2> - -<p>Manipulações do Evento podem ser atribuídas a vários objetos (incluindo elementos DOM, documentos, o {{domxref("window")}} object, etc.). Quando um evento ocorre, o objeto do evento é criado e passado sequencialmente ao event listeners.</p> - -<p>A interface {{domxref("Event")}} é acessível de dentro da função manipuladora, atrás do objeto evento passado como primeiro argumento. O seguinte exemplo simples mostra como um objeto evento é passado á função manipuladora do evento, e pode usado de dentro de tal função.</p> - -<pre class="brush: js notranslate">function print(evt) { - // the evt parameter is automatically assigned the event object - // take care of the differences between console.log & alert - console.log('print:', evt) - alert(evt) -} -// any function should have an appropriate name, that's what called semantic -table_el.onclick = print -</pre> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> -</ul> |