Comparativo entre Event Targets
Invalid slug for templ/sidebar: Learn_web_development/Core/Scripting/Event_bubbling
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 | Non-standard 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 | Non-standard 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> 