Comparaison des cibles d'évènements

Invalid slug for templ/sidebar: Learn_web_development/Core/Scripting/Event_bubbling

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