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 |
Interface du DOM MouseEvent |
Identifie une cible secondaire pour l'évènement. |
Exemples
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
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
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
<div id="outer">
<div id="inner"></div>
</div>
<p id="log" />
CSS
#outer {
background: rebeccapurple;
}
#inner {
margin: 0px 100px 0px 100px;
border: 10px solid black;
width: 100px;
height: 100px;
}
JavaScript
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.