Сравнение разных 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
Если по какой-либо причине событие
было перенацелено, кроме анонимного пересечения границ, событие будет
установлено на цель до перенацеливания. Например, события мыши
перенацеливаются на их родительский узел, когда они встречаются над
текстовыми узлами (баг 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>