Comparaison des cibles d'évènements
===================================

On peut facilement confondre les différentes cibles d'évènements lorsqu'on écrit un gestionnaire d'évènement. Cet article devrait vous aider à y voir plus clair dans l'utilisation des propriétés relatives aux cibles.

Voici les cibles à considérer :

| Propriété | Définie par | Objectif |
| --- | --- | --- |
| `event.target` | Interface `Event` du DOM | L'élément du DOM situé à gauche (dans l'instruction JavaScript) lors de l'appel qui a déclenché cet évènement. |
| `event.currentTarget` | Interface `Event` du DOM | L'objet `EventTarget` dont les gestionnaires d'évènements sont traités. Lorsque la capture d'évènement et le bouillonnement ont lieu, cette valeur change. |
| `event.relatedTarget (en-US)` | Interface du DOM `MouseEvent` | Identifie une cible secondaire pour l'évènement. |

Exemples
--------

### HTML


```html
<table>
  <thead>
    <tr>
      <td>
        La cible originale qui émet l'évènement
        <small><code>event.target</code></small>
      </td>
      <td>
        La cible dont le gestionnaire d'évènement est en cours de traitement
        <small><code>event.currentTarget</code></small>
      </td>
      <td>
        Identifie un (éventuel) autre élément impliqué dans l'évènement
        <small><code>event.relatedTarget</code></small>
      </td>
    </tr>
  </thead>
  <tr>
    <td id="target"></td>
    <td id="currentTarget"></td>
    <td id="relatedTarget"></td>
  </tr>
</table>
```

### CSS


```css
table {
  border-collapse: collapse;
  height: 150px;
  width: 100%;
}

td {
  border: 1px solid #ccc;
  font-weight: bold;
  padding: 5px;
  min-height: 30px;
}

thead tr {
  background-color: #99ff99;
}
```

### JavaScript


```js
function handleClicks(e) {
  document.getElementById("target").innerHTML = e.target;
  document.getElementById("currentTarget").innerHTML = e.currentTarget;
  document.getElementById("relatedTarget").innerHTML = e.relatedTarget;
}

function handleMouseover(e) {
  document.getElementById("target").innerHTML = e.target;
  document.getElementById("relatedTarget").innerHTML = e.relatedTarget;
}

document.addEventListener("click", handleClicks);
document.addEventListener("mouseover", handleMouseover);
```

### Résultat

Cliquer sur le texte dans le tableau vous permettra d'observer la différence entre `explicitOriginalTarget`, `originalTarget`, et `target`.

Utilisation de `target` et de `relatedTarget`
---------------------------------------------

La propriété `relatedTarget` de l'évènement `mouseover` contient le nœud sur lequel la souris était précédemment. Pour l'évènement `mouseout`, elle contient le nœud sur lequel la souris s'est déplacée.

| Type d'évènement | `event.target` | `event.relatedTarget` (en-US) |
| --- | --- | --- |
| `mouseover` | L'objet `EventTarget` sur lequel le dispositif de pointage est entré. | L'objet `EventTarget` que le dispositif de pointage quitte. |
| `mouseout` | L'objet `EventTarget` que le dispositif de pointage quitte. | L'objet `EventTarget` sur lequel le dispositif de pointage est entré. |

### Exemple

#### HTML


```html
<div id="outer">
  <div id="inner"></div>
</div>
<p id="log" />
```


#### CSS


```css
#outer {
  background: rebeccapurple;
}
#inner {
  margin: 0px 100px 0px 100px;
  border: 10px solid black;
  width: 100px;
  height: 100px;
}
```


#### JavaScript


```js
const inner = document.getElementById("inner");
const log = document.getElementById("log");

function handleMouseOver(event) {
  log.innerHTML =
    "mouseover " + event.relatedTarget.id + " > " + event.target.id;
}

function handleMouseOut(event) {
  log.innerHTML =
    "mouseout " + event.target.id + " > " + event.relatedTarget.id;
}

inner.addEventListener("mouseover", handleMouseOver);
inner.addEventListener("mouseout", handleMouseOut);
```


#### Résultat

Déplacez votre pointeur dans le carré noir et en dehors.