Сравнение разных 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 Если по какой-либо причине событие было перенацелено, кроме анонимного пересечения границ, событие будет установлено на цель до перенацеливания. Например, события мыши перенацеливаются на их родительский узел, когда они встречаются над текстовыми узлами ([Firefox bug 185889](https://bugzil.la/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.

Примеры

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

Пример

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