blob: ff4ebf6447c906d41ef76d44c2e58ecc679784b6 (
plain)
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
136
137
138
|
---
title: focus
slug: Web/API/Element/focus_event
translation_of: Web/API/Element/focus_event
original_slug: Web/Events/focus
---
<p>focus事件在元素获取焦点时触发. 这个事件和 <a href="/en-US/docs/Mozilla_event_reference/focusin"><code>focusin</code></a> 最大的区别仅仅在于后者会事件冒泡.</p>
<h2 id="基本信息">基本信息</h2>
<dl>
<dt style="float: left; text-align: right; width: 120px;">规范</dt>
<dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></dd>
<dt style="float: left; text-align: right; width: 120px;">接口</dt>
<dd style="margin: 0 0 0 120px;">{{ domxref("FocusEvent") }}</dd>
<dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt>
<dd style="margin: 0 0 0 120px;">否</dd>
<dt style="float: left; text-align: right; width: 120px;">能否取消默认</dt>
<dd style="margin: 0 0 0 120px;">否</dd>
<dt style="float: left; text-align: right; width: 120px;">事件目标</dt>
<dd style="margin: 0 0 0 120px;">Element</dd>
<dt style="float: left; text-align: right; width: 120px;">默认行为</dt>
<dd style="margin: 0 0 0 120px;">无.</dd>
</dl>
<div class="note">注释: 这里的接口是指 {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})</div>
<h2 id="属性">属性</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Property</th>
<th scope="col">Type</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>target</code> {{readonlyInline}}</td>
<td>{{domxref("EventTarget")}}</td>
<td>Event target (DOM element)</td>
</tr>
<tr>
<td><code>type</code> {{readonlyInline}}</td>
<td>{{domxref("DOMString")}}</td>
<td>The type of event.</td>
</tr>
<tr>
<td><code>bubbles</code> {{readonlyInline}}</td>
<td>{{jsxref("Boolean")}}</td>
<td>Whether the event normally bubbles or not.</td>
</tr>
<tr>
<td><code>cancelable</code> {{readonlyInline}}</td>
<td>{{jsxref("Boolean")}}</td>
<td>Whether the event is cancellable or not.</td>
</tr>
<tr>
<td><code>relatedTarget</code> {{readonlyInline}}</td>
<td>{{domxref("EventTarget")}} (DOM element)</td>
<td>null</td>
</tr>
</tbody>
</table>
<h2 id="事件委托">事件委托</h2>
<p>此事件有两个可以实现事件委托的方法 : 通过在支持的浏览器上使用 <code>focusin</code> 事件 (除了Firefox之外的所有浏览器), 或者通过设置 <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> 的参数"useCapture" 值为true:</p>
<p>{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}</p>
<p>(Sample code from <a href="/en-US/docs/Web/Events/blur">blur (event)</a>)</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Featrue</th>
<th>Chrome</th>
<th>Edge</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>
<td>{{CompatVersionUnknown()}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Edge</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>{{CompatUnknown()}}</td>
<td>{{CompatUnknown()}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown()}}</td>
<td>{{CompatUnknown()}}</td>
<td>{{CompatUnknown()}}</td>
<td>{{CompatUnknown()}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="相关事件">相关事件</h2>
<ul>
<li>{{event("focus")}}</li>
<li>{{event("blur")}}</li>
<li>{{event("focusin")}}</li>
<li>{{event("focusout")}}</li>
</ul>
|
