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