Сравнение разных 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 DOM MouseEvent Interface Определяет вторичную цель для события.
event.explicitOriginalTarget nsIDOMNSEvent.idl Если по какой-либо причине событие было перенацелено, кроме анонимного пересечения границ, событие будет установлено на цель до перенацеливания. Например, события мыши перенацеливаются на их родительский узел, когда они встречаются над текстовыми узлами (баг 185889), и в этом случае .target покажет на родителя и .explicitOriginalTarget покажет на текстовый узел.
В отличие от .originalTarget.explicitOriginalTarget никогда не будет содержать анонимный контент.
event.originalTarget nsIDOMNSEvent.idl Первоначальная цель события перед любым перенацеливанием. Подробнее см. Анонимный контент#Event_Flow_and_Targeting.

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

TODO: Only available in a Mozilla-based browser? TODO: Only suitable for extension-developers?

Примеры

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

 

Метки документа и участники

Внесли вклад в эту страницу: ademaro
Обновлялась последний раз: ademaro,