СÑавнение ÑазнÑÑ 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>