Сравнение разных 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>
```