Comparativo entre Event Targets
Event targets
É facil se confundir sobre o tipo de alvo (target) que deseja-se examinar ao criar um manipulador de eventos (event handler). Este artigo se propõe a esclarecer o uso da propriedade target.
Há 5 tipos de targets a se considerar:
| Propriedade | Definido em | Objetivo |
|---|---|---|
| event.target | DOM Event Interface |
O elemento do DOM à esquerda da chamada que disparou este evento, por exemplo: element.dispatchEvent(event) |
| event.currentTarget | DOM Event Interface |
O
EventTarget
do qual o
EventListeners
está sendo atualmente processado. Logo que a captura e a subida do
evento ocorre a mudança deste valor.
|
| event.relatedTarget | DOM MouseEvent Interface | Identifica um alvo secundário para o evento. |
| event.explicitOriginalTarget | Event.webidl |
Não padrão
Se o evento foi redirecionado por
alguma outra razão senão o cruzamento de uma fronteira anônima, este
evento será colocado no alvo antes que o redirecionamento ocorra. por
exemplo, eventos do mouse são redirecionados à seus elementos pais
quando acontecem sobre nós de texto ([Firefox bug 185889](https://bugzil.la/185889)), e neste
caso .target mostrará o nó pai e
.explicitOriginalTarget mostrará o nó texto. Diferente de
.originalTarget, .explicitOriginalTarget nunca
irá conter um conteúdo anônimo.
|
| event.originalTarget | Event.webidl | Não padrão O alvo original do evento, antes de qualquer redirecionamento. Veja Anonymous Content#Event_Flow_and_Targeting para mais detalhes. |
Uso de explicitOriginalTarget e originalTarget
TODO: Disponível apensas em navegadores Mozilla-based?
TODO: Adequado apenas para desenvolvedores de extensões?
Exemplos
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Comparison of Event Targets</title>
<style>
table {
border-collapse: collapse;
height: 150px;
width: 100%;
}
td {
border: 1px solid #ccc;
font-weight: bold;
padding: 5px;
min-height: 30px;
}
.standard {
background-color: #99ff99;
}
.non-standard {
background-color: #902D37;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td class="standard">Original target dispatching the event <small>event.target</small></td>
<td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
<td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
<td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
<td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
</tr>
</thead>
<tr>
<td id="target"></td>
<td id="currentTarget"></td>
<td id="relatedTarget"></td>
<td id="explicitOriginalTarget"></td>
<td id="originalTarget"></td>
</tr>
</table>
<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
<script>
function handleClicks(e) {
document.getElementById('target').innerHTML = e.target;
document.getElementById('currentTarget').innerHTML = e.currentTarget;
document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
document.getElementById('originalTarget').innerHTML = e.originalTarget;
}
function handleMouseover(e) {
document.getElementById('target').innerHTML = e.target;
document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
}
document.addEventListener('click', handleClicks, false);
document.addEventListener('mouseover', handleMouseover, false);
</script>
</body>
</html>
Uso de target e relatedTarget
A propriedade relatedTarget do evento de mouseover mantém o nó de onde o mouse estava sobre anteriormente. Para o evento de mouseout, mantém o nó para onde o mouse se moveu.
| Tipo de Evento | event.target | event.relatedTarget |
|---|---|---|
mouseover |
O EventTarget do qual o dispositivo apontador entrou. | O EventTarget do qual o dispositivo apontador saiu. |
mouseout |
O EventTarget do qual o dispositivo apontador saiu. | O EventTarget do qual o dispositivo apontador entrou. |
TODO: Necessário descrição complemento sobre eventos de dragenter e dragexit.
Exemplo
<hbox id="outer">
<hbox id="inner"
onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
</hbox>