---
title: Event.currentTarget
slug: Web/API/Event/currentTarget
tags:
  - API
  - CompatibilidadeEntreNavegadores
  - DOM
  - Gecko
  - Propriedade
translation_of: Web/API/Event/currentTarget
---
<p>{{APIRef("DOM")}}</p>

<p>Identifica o alvo atual para o evento quando o event percorre o DOM. O currentTarget sempre se refere ao elemento associado ao event handler, ao invés do event.target que identifica o elemento ao qual o evento ocorreu.</p>

<h2 id="Exemplo">Exemplo</h2>

<p><code>event.currentTarget</code> é bom para ser usado quando nós queremos associar o mesmo event handler para vários elementos.</p>

<pre class="brush: js">function hide(e){
  e.currentTarget.style.visibility = "hidden";
  console.log(e.currentTarget);
  // Quando essa função é usada como um event
  // handler: this === e.currentTarget
}

var ps = document.getElementsByTagName('p');

for(var i = 0; i &lt; ps.length; i++){
  // console: print the clicked &lt;p&gt; element
  ps[i].addEventListener('click', hide, false);
}
// console: print &lt;body&gt;
document.body.addEventListener('click', hide, false);

// Clique e faça os parágrafos desaparecerem
</pre>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Especificação</th>
   <th>Status</th>
   <th>Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td>
   <td>{{Spec2("DOM3 Events")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td>
   <td>{{Spec2("DOM2 Events")}}</td>
   <td>Definição incial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Supote básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>10.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</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>Supote básico</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>10.0</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Do Internet Explorer 6 até o 8, o modelo do event é diferente. Event listeners estão acoplados com o {{domxref("EventTarget.attachEvent")}} método não padronizado. Neste modelo não há um equivalente para <code>event.currentTarget</code> e <code>this</code> é um objeto global. Uma solução para simular o <code>event.currentTarget</code> é envolver seu handler em uma função e chamando-a usando o <code>Function.prototype.call</code> com o elemento sendo o primeiro argumento. Desta forma, <code>this</code> será o valor esperado.</p>

<h2 id="Veja_também">Veja também</h2>

<p><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparativo dos Event Targets</a></p>