1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: Event.target
slug: Web/API/Event/target
tags:
- Событие
translation_of: Web/API/Event/target
---
<p>{{ApiRef("DOM")}}</p>
<p>Свойство <code><strong>target</strong></code> интерфейса {{domxref ("Event")}} является ссылкой на объект, который был инициатором события. Он отличается от {{domxref ("Event.currentTarget")}}, если обработчик события вызывается во время всплытия (bubbling) или захвата события.</p>
<p id="Синтаксис">Синтаксис</p>
<pre class="syntaxbox notranslate">theTarget = event.target</pre>
<p>Значение:</p>
<p>{{domxref("EventTarget")}}</p>
<h2 id="Пример">Пример</h2>
<p>Свойство <code>event.target</code> может быть использовано для реализации <strong>делегирования событий</strong>.</p>
<pre class="notranslate">// Создадим список
var ul = document.createElement('ul');
document.body.appendChild(ul);
var li1 = document.createElement('li');
var li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);
function hide(e){
// e.target ссылается на кликнутый <li> элемент
// Он отличается от e.currentTarget который будет ссылаться на родительский <ul> в этом контексте
e.target.style.visibility = 'hidden';
}
// Назначим обработчик к списку
// Он будет вызван когда кликнут на любой <li>
ul.addEventListener('click', hide, false);</pre>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</th>
</tr>
<tr>
<td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
<td>{{Spec2("DOM WHATWG")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
<td>{{Spec2("DOM4")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
<td>{{Spec2("DOM2 Events")}}</td>
<td>Первоначальное определение.</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Примечания">Примечания</h2>
<p>В IE 6-8 модель событий отличается. Обработчики событий назначаются с помощью нестандартного {{domxref('EventTarget.attachEvent')}} метода. При этом в объекте события есть свойство {{domxref('Event.srcElement')}}, вместо <code>target</code> свойства, но по смыслу оно идентично <code>event.target</code>.</p>
<pre class="brush: js notranslate">function hide(e) {
// Поддержка IE 6-8
var target = e.target || e.srcElement;
target.style.visibility = 'hidden';
}
</pre>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li>
</ul>
|
