Сравнение разных Event Targets

Event targets

Легко запутаться в том, какую цель (target) следует изучить при написании обработчика событий. В этой статье разъяснено использование свойств target.

Существуют 5 целей для рассмотрения:

Property	Defined in	Purpose
event.target	DOM Event Interface	Элемент DOM слева от вызова этого события, например: element.dispatchEvent(event)
event.currentTarget	DOM Event Interface	`EventTarget`, чьи `EventListeners` в настоящее время обрабатываются. По мере того, как происходит захват и всплытие событий, это значение изменяется.
event.relatedTarget (en-US)	DOM MouseEvent Interface	Определяет вторичную цель для события.
event.explicitOriginalTarget (en-US)	Event.webidl	Non-standard Если по какой-либо причине событие было перенацелено, кроме анонимного пересечения границ, событие будет установлено на цель до перенацеливания. Например, события мыши перенацеливаются на их родительский узел, когда они встречаются над текстовыми узлами (баг 185889), и в этом случае `.target` покажет на родителя и `.explicitOriginalTarget` покажет на текстовый узел. В отличие от `.originalTarget` — `.explicitOriginalTarget` никогда не будет содержать анонимный контент.
event.originalTarget (en-US)	Event.webidl	Non-standard Первоначальная цель события перед любым перенацеливанием. Подробнее см. Анонимный контент#Event_Flow_and_Targeting.

Использование `explicitOriginalTarget` и `originalTarget`

Note: These properties are only available in Mozilla-based browsers.

Примеры

<!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">Изначальная цель, отправляющая событие <small>event.target</small></td>
            <td class="standard">Цель, кто обрабатывает события <small>event.currentTarget</small></td>
            <td class="standard">Идентифицировать другой элемент (если он есть), участвующий в событии <small>event.relatedTarget</small></td>
            <td class="non-standard">Если по какой-то причине произошло перенацеливание события <small>event.explicitOriginalTarget</small> содержит цель перед перенацеливанием (никогда не содержит анонимных целей)</td>
            <td class="non-standard">Если по какой-то причине произошло перенацеливание события <small>event.originalTarget</small> содержит цель перед перенацеливанием (может содержать анонимные цели)</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>Нажав на текст, вы увидите разницу между explicitOriginalTarget, originalTarget и 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>

Использование `target` и `relatedTarget`

Свойство relatedTarget для события mouseover содержит узел, над которым ранее была указана мышь. Для события mouseout он удерживает узел, к которому движется мышь.

Тип события	event.target	event.relatedTarget (en-US)
`mouseover`	EventTarget, в который входим указателем	EventTarget, из которого выходим указателем
`mouseout`	EventTarget, из которого выходим указателем	EventTarget, в который входим указателем

TODO: Также требуется описание событий dragenter и dragexit.

Пример

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