Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
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 propriedadetarget.
Há 5 tipos detargets a se considerar:
Uso deexplicitOriginalTarget eoriginalTarget
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>Original target dispatching the event <small>event.target</small></td> <td>Target who's event listener is being processed <small>event.currentTarget</small></td> <td>Identify other element (if any) involved in the event <small>event.relatedTarget</small></td> <td>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>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></td> <td></td> <td></td> <td></td> <td></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 detarget erelatedTarget
A propriedaderelatedTarget do evento demouseover mantém o nó de onde o mouse estava sobre anteriormente. Para o evento demouseout, 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 dedragenter edragexit.
Exemplo
<hbox> <hbox onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');" onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');" /></hbox>