elemento.addEventListener

  • Revision slug: DOM/element.addEventListener
  • Revision title: elemento.addEventListener
  • Revision id: 334775
  • Criado:
  • Criador: guipremonsa
  • É a revisão atual? Não
  • Comentar

Conteúdo da revisão

Resumo

addEventListener() registra uma única espera de evento em um único alvo. O alvo do evento pode ser um único elemento em um documento, o documento em si, uma janela, ou um XMLHttpRequest.

Para registrar mais de uma espera de evento como alvo, chame addEventListener() para o mesmo alvo mas com diferentes tipos de evento ou captura de parâmetros.

Sintaxe

alvo.addEventListener(tipo, escuta[, usarCaptura]);
alvo.addEventListener(tipo, escuta[, usarCaptura, seQuerNaoConfiavel {{ Non-standard_inline() }}]); // Gecko/Mozilla only
tipo
Uma linha de texto que representa o tipo de evento a ser esperado.
escuta
O objeto que recebe uma notificação quando um evento do tipo especificado ocorre. Esse objeto precisa implementar a interface do EventListener, ou simplesmente executar uma função JavaScript.
usarCaptura {{ optional_inline() }}
Se true, usarCaptura indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à escuta registrada antes de serem enviados à qualquer EventTarget 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 Eventos DOM Nível 3 para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, usarCaptura é false.
seQuerNaoConfiavel {{ Non-standard_inline() }}
Se true, o evento pode ser acionado por conteúdo não-confiável. Veja Interação entre páginas com e sem privilégios.
Nota: usarCaptura 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.

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Evento DOM</title>

<style>
#t { border: 1px solid red }
#t1 { background-color: pink; }
</style>

<script>
// 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);
</script>

</head>
<body>

<table id="t"> 
   <tr><td id="t1">one</td></tr>
   <tr><td id="t2">two</td></tr>
</table>

</body> 
</html> 

{{ JSFiddleLink("madBYK/UumUP") }}

No exemplo acima, modifyText() é uma escuta para eventos de click registrados usando addEventListener(). Um clique em qualquer lugar da tabela irá borbulhar para cima até o manipulador e executar modifyText().

Se você deseja passar parâmetros para a função de escuta, você deve usar uma função anônima.

<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Evento DOM</title>

<style>
#t { border: 1px solid red }
#t1 { background-color: pink; }
</style>

<script>

// 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); 
} 
</script>

</head>
<body onload="load();">

<table id="t">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

</body>
</html>

Notas

Por que usar addEventListener?

Permite mais de um manipulador por evento. Isso é particularmente útil em bibliotecas DHTML ou em extensões Mozilla que precisam trabalhar bem mesmo com outras bibliotecas/extensões sendo usadas.addEventListener é a maneira de registrar uma espera de evento como especificada no W3C DOM. Seus benefícios são os seguintes:

  • Te dá um pente-fino do estágio em que a espera de evento é ativada (captura ou borbulha).
  • Funciona em qualquer elemento DOM, não só para elementos HTML.

Outra alternativa, uma maneira antiga de registrar esperas de evento está descrita abaixo.

Adicionando uma espera de evento durante um disparo de evento

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.

Múltiplas esperas de evento idênticas

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 removeEventListener.

O valor de this no manipulador

É 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.

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:

<table id="t" onclick="modifyText();">
  . . .

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).

Nota: JavaScript 1.8.5 introduces the Function.prototype.bind() method, which lets you specify the value that should be used as this for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can later remove it.

This is an example with and without bind:

var Something = function(element)
{
  this.name = 'Something Good';
  this.onclick1 = function(event) {
    console.log(this.name); // undefined, as this is the element
  };
  this.onclick2 = function(event) {
    console.log(this.name); // 'Something Good', as this is the binded Something object
  };
  element.addEventListener('click', this.onclick1, false);
  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
}

Another solution is using a special function called handleEvent to catch any events:

var Something = function(element)
{
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good', as this is the Something object
    switch(event.type) {
      case 'click':
        // some code here...
        break;
      case 'dblclick':
        // some code here...
        break;
    }
  };
  element.addEventListener('click', this, false); // Not this.handleEvent, only this
  element.addEventListener('dblclick', this, false); // Not this.handleEvent, only this
}

Legacy Internet Explorer and attachEvent

In Internet Explorer versions prior to IE 9, you have to use attachEvent rather than the standard addEventListener. To support IE, the example above can be modified to:

if (el.addEventListener) {
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', modifyText);
}

There is a drawback to attachEvent, the value of this will be a reference to the window object instead of the element on which it was fired.

Older way to register event listeners

addEventListener() was introduced with the DOM 2 Events specification. Before then, event listeners were registered as follows:

// Pass a function reference — do not add '()' after it, which would call the function!
el.onclick = modifyText;

// Using a function expression
element.onclick = function() {
    // ... function logic ...
};

This method replaces the existing click event listener(s) on the element if there are any. Similarly for other events and associated event handlers such as blur (onblur), keypress (onkeypress), and so on.

Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to register event listeners dynamically unless the extra features of addEventListener() are needed.

Memory issues

var i;
var els = document.getElementsByTagName('*');

// Case 1
for(i=0 ; i<els.length ; i++){
  els[i].addEventListener("click", function(e){/*do something*/}, false});
}

// Case 2
function processEvent(e){
  /*do something*/
}

for(i=0 ; i<els.length ; i++){
  els[i].addEventListener("click", processEvent, false});
}

In the first case, a new (anonymous) function is created at each loop turn. In the second case, the same previously declared function is used as an event handler. This results in smaller memory consumption. Moreover, in the first case, since no reference to the anonymous functions is kept, it is not possible to call element.removeEventListener because we do not have a reference to the handler, while in the second case, it's possible to do myElement.removeEventListener("click", processEvent, false).

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop(1.0) }} 9.0 7 1.0
useCapture made optional 1.0 6.0 9.0 11.60 {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile(1.0) }} 9.0 6.0 1.0

Gecko notes

  • Prior to Firefox 6, the browser would throw if the useCapture parameter was not explicitly false. Prior to Gecko 9.0 {{ geckoRelease("9.0") }}, addEventListener() would throw an exception if the listener parameter was null; now the method returns without error, but without doing anything.

WebKit notes

  • Although WebKit has explicitly added [optional] to the useCapture parameter as recently as June 2011, it had been working before the change. The new change landed in Safari 5.1 and Chrome 13.

See Also

Specification

Fonte da revisão

<h2 id="Summary" name="Summary">Resumo</h2>
<p><code>addEventListener()</code> registra uma única espera de evento em um único alvo. O <a href="/en-US/docs/DOM/EventTarget" title="DOM/EventTarget">alvo do evento</a>&nbsp;pode ser um único&nbsp;<a href="/en-US/docs/DOM/element" title="DOM/element">element</a>o&nbsp;em um documento, o&nbsp;<code><a href="/en-US/docs/DOM/document" title="DOM/document">document</a>o</code>&nbsp;em si, uma <code><a href="/en-US/docs/DOM/window" title="DOM/window">janela</a></code>, ou um&nbsp;<code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>.</p>
<p>Para registrar mais de uma espera de evento como alvo, chame&nbsp;<code>addEventListener()</code>&nbsp;para o mesmo alvo mas com diferentes tipos de evento ou captura de parâmetros.</p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="syntaxbox">
<code><em>alvo</em>.addEventListener(<em>tipo</em>, <em>escuta</em>[, <em>usarCaptura</em>]);
<em>alvo</em>.addEventListener(<em>tipo</em>, <em>escuta</em>[, <em>usarCaptura</em>, <em>seQuerNaoConfiavel </em>{{ Non-standard_inline() }}]); // Gecko/Mozilla only</code></pre>
<dl>
  <dt>
    <code>tipo</code></dt>
  <dd>
    Uma linha de texto que representa o&nbsp;<a class="internal" href="/en-US/docs/DOM/event.type" title="DOM/Event.type">tipo de evento</a>&nbsp;a ser esperado.</dd>
  <dt>
    <code>escuta</code></dt>
  <dd>
    O objeto que recebe uma notificação quando um evento do tipo especificado ocorre. Esse objeto precisa implementar a interface do&nbsp;<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="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">função</a>&nbsp;JavaScript.</dd>
  <dt>
    <code>usarCaptura</code>&nbsp;{{ optional_inline() }}</dt>
  <dd>
    Se&nbsp;<code>true</code>, <code>usarCaptura</code>&nbsp;indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à <code>escuta</code>&nbsp;registrada antes de serem enviados à qualquer <code>EventTarget</code>&nbsp;abaixo dela na hierarquia de DOMs. Eventos que borbulharem para cima na hierarquia não acionarão a escuta designada &nbsp;a usar a captura. Veja&nbsp;<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>&nbsp;para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, <code>usarCaptura</code>&nbsp;é&nbsp;<code>false</code>.</dd>
  <dt>
    <code>seQuerNaoConfiavel</code> {{ Non-standard_inline() }}</dt>
  <dd>
    Se&nbsp;<code>true</code>, o evento pode ser acionado por conteúdo não-confiável. Veja&nbsp;<a href="/en-US/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>usarCaptura</code>&nbsp;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>
<dl>
  <br />
</dl>
<h2 id="Example" name="Example">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>{{ JSFiddleLink("madBYK/UumUP") }}</p>
<p>No exemplo acima, <code>modifyText()</code>&nbsp;é uma escuta para eventos de&nbsp;<code>click</code> registrados usando&nbsp;<code>addEventListener()</code>. Um clique em qualquer lugar da tabela irá borbulhar para cima até o manipulador e executar&nbsp;<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="Why_use_addEventListener.3F" name="Why_use_addEventListener.3F">Por que usar&nbsp;<code>addEventListener</code>?</h3>
<p><code>Permite mais de um manipulador por evento. Isso é particularmente útil em bibliotecas&nbsp;<a href="/en-US/docs/DHTML" title="DHTML">DHTML</a> ou em&nbsp;<a href="/en-US/docs/Extensions" title="Extensions">extensões Mozilla</a>&nbsp;que precisam trabalhar bem mesmo com outras bibliotecas/extensões sendo usadas.addEventListener</code>&nbsp;é a maneira de registrar uma espera de evento como especificada no W3C DOM. Seus benefícios são os seguintes:</p>
<ul>
  <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>Outra alternativa, <a href="#Older_way_to_register_event_listeners">uma maneira antiga de registrar esperas de evento</a>&nbsp;está descrita abaixo.</p>
<h3><strong>Adicionando uma espera de evento durante um disparo de evento</strong></h3>
<p>Se um&nbsp;EventListener&nbsp;for somado a um&nbsp;EventTarget&nbsp;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><strong>Múltiplas esperas de evento idênticas</strong></h3>
<p>Se múltiplas esperas de evento idênticas&nbsp;forem registradas no mesmo&nbsp;EventTarget&nbsp;com os mesmos parâmetros, as versões duplicadas serão descartadas. Elas não fazem o&nbsp;EventListener&nbsp;ser disparado mais de uma vez, e, como as duplicatas são descartadas, elas não precisam ser removidas manualmente com o método&nbsp;<a href="https://developer.mozilla.org/en-US/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a>.</p>
<h3><strong>O valor de&nbsp;</strong><strong>this</strong><strong>&nbsp;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&nbsp;addEventListener(),&nbsp;o valor de&nbsp;this&nbsp;é mudado — perceba que o valor de&nbsp;this&nbsp;é passado para uma função a partir do disparador.</p>
<p>Nos exemplos acima, o valor de&nbsp;this&nbsp;em&nbsp;modifyText(),&nbsp;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&nbsp;this&nbsp;em&nbsp;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 introduces the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code>&nbsp;method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can later remove it.</div>
<p>This is an example with and without <code>bind</code>:</p>
<pre class="brush: js">
var Something = function(element)
{
  this.name = 'Something Good';
  this.onclick1 = function(event) {
    console.log(this.name); // undefined, as this is the element
  };
  this.onclick2 = function(event) {
    console.log(this.name); // 'Something Good', as this is the binded Something object
  };
  element.addEventListener('click', this.onclick1, false);
  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
}
</pre>
<p>Another solution is using a special function called <code>handleEvent</code> to catch any events:</p>
<pre class="brush: js">
var Something = function(element)
{
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good', as this is the Something object
    switch(event.type) {
      case 'click':
        // some code here...
        break;
      case 'dblclick':
        // some code here...
        break;
    }
  };
  element.addEventListener('click', this, false); // Not this.handleEvent, only this
  element.addEventListener('dblclick', this, false); // Not this.handleEvent, only this
}
</pre>
<h3 id="Compatibility" name="Compatibility">Legacy Internet Explorer and attachEvent</h3>
<p>In Internet Explorer versions prior to IE 9, you have to use <code><a class="external" href="http://msdn.microsoft.com/en-us/library/ms536343(VS.85).aspx">attachEvent</a></code> rather than the standard <code>addEventListener</code>. To support IE, the example above can be modified to:</p>
<pre class="brush: js">
if (el.addEventListener) {
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', modifyText);
}
</pre>
<p>There is a drawback to <code>attachEvent</code>, the value of <code>this</code> will be a reference to the <code>window</code> object instead of the element on which it was fired.</p>
<h3 id="Older_way_to_register_event_listeners" name="Older_way_to_register_event_listeners">Older way to register event listeners</h3>
<p><code>addEventListener()</code> was introduced with the DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a> specification. Before then, event listeners were registered as follows:</p>
<pre class="brush: js">
// Pass a function reference — do not add '()' after it, which would call the function!
el.onclick = modifyText;

// Using a function expression
element.onclick = function() {
    // ... function logic ...
};
</pre>
<p>This method replaces the existing <code>click</code> event listener(s) on the element if there are any. Similarly for other events and associated event handlers such as <code>blur</code> (<code>onblur</code>), <code>keypress</code> (<code>onkeypress</code>), and so on.</p>
<p>Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to register event listeners dynamically unless the extra features of <code>addEventListener()</code> are needed.</p>
<h3 id="Memory_issues" name="Memory_issues">Memory issues</h3>
<pre class="brush: js">
var i;
var els = document.getElementsByTagName('*');

// Case 1
for(i=0 ; i&lt;els.length ; i++){
  els[i].addEventListener("click", function(e){/*do something*/}, false});
}

// Case 2
function processEvent(e){
  /*do something*/
}

for(i=0 ; i&lt;els.length ; i++){
  els[i].addEventListener("click", processEvent, false});
}

</pre>
<p>In the first case, a new (anonymous) function is created at each loop turn. In the second case, the same previously declared function is used as an event handler. This results in smaller memory consumption. Moreover, in the first case, since no reference to the anonymous functions is kept, it is not possible to call <code><a href="/en-US/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener</a></code> because we do not have a reference to the handler, while in the second case, it's possible to do <code>myElement.removeEventListener("click", processEvent, false)</code>.</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</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> made optional</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>Feature</th>
        <th>Android</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>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="Gecko_notes">Gecko notes</h4>
<ul>
  <li>Prior to Firefox 6, the browser would throw if the <code>useCapture</code> parameter was not explicitly <code>false</code>. Prior to Gecko 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> would throw an exception if the <code>listener</code> parameter was <code>null</code>; now the method returns without error, but without doing anything.</li>
</ul>
<h4 id="WebKit_notes">WebKit notes</h4>
<ul>
  <li>Although WebKit has explicitly added <code>[optional]</code> to the <code>useCapture</code> parameter <a class="external" href="http://trac.webkit.org/changeset/89781">as recently as June 2011</a>, it had been working before the change. The new change landed in Safari 5.1 and Chrome 13.</li>
</ul>
<h2 id="Specification" name="Specification">See Also</h2>
<ul>
  <li><a href="/en-US/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener()</a></li>
  <li><a href="/en-US/docs/DOM/Creating_and_triggering_events" title="DOM/Creating_and_triggering_custom_events">Creating and triggering custom events</a></li>
  <li><a class="external" href="http://www.quirksmode.org/js/this.html" title="http://www.quirksmode.org/js/this.html">More details on the use of <code>this</code> in event handlers</a></li>
</ul>
<h2 id="Specification" name="Specification">Specification</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">DOM Level 2 Events: 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">DOM Level 3 Events: EventTarget.addEventListener</a></li>
</ul>
Reverter para esta revisão