Сравнение разных 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 Event.webidl Если по какой-либо причине событие было перенацелено, кроме анонимного пересечения границ, событие будет установлено на цель до перенацеливания. Например, события мыши перенацеливаются на их родительский узел, когда они встречаются над текстовыми узлами ([Firefox bug 185889](https://bugzil.la/185889)), и в этом случае .target покажет на родителя и .explicitOriginalTarget покажет на текстовый узел.
В отличие от .originalTarget — .explicitOriginalTarget никогда не будет содержать анонимный контент.
event.originalTarget Event.webidl Первоначальная цель события перед любым перенацеливанием. Подробнее см. Анонимный контент#Event_Flow_and_Targeting.

Примеры

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>