blob: 543a21af0dc680e173e9b0ac6bbb568104411cac (
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>O evento <code>focus</code> é acionado assim que um elemento recebe um foco. O grande diferencial entre este evento e o evento <a href="/en-US/docs/Mozilla_event_reference/focusin"><code>focusin</code></a>, é que esse segundo "borbulha".</p>
<h2 id="Informações_Gerais">Informações Gerais</h2>
<dl>
<dt style="float: left; text-align: right; width: 120px;">Especificação</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;">Interface</dt>
<dd style="margin: 0 0 0 120px;">{{ domxref("FocusEvent") }}</dd>
<dt style="float: left; text-align: right; width: 120px;">Borbulha</dt>
<dd style="margin: 0 0 0 120px;">Não</dd>
<dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
<dd style="margin: 0 0 0 120px;">Não</dd>
<dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
<dd style="margin: 0 0 0 120px;">Element</dd>
<dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt>
<dd style="margin: 0 0 0 120px;">Nenhuma.</dd>
</dl>
<div class="note">Note: The interface was {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})</div>
<h2 id="Propriedades">Propriedades</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="Eventos_Delegados">Eventos Delegados</h2>
<p>Existem 2 maneiras diferentes de implementações delegados a partir de um evento: por meio da utilização do evento <code>focusin</code> que todos os browsers atuais suportam tão tecnologia (todos exceto o Firefox), ou por setando o parâmetro "useCapture" do elemento <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> como <code>true</code>:</p>
<p>{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}</p>
<p>(Exemplo de codigo do evento <a href="/en-US/docs/Web/Events/blur">blur (event)</a>)</p>
<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</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>{{CompatUnknown()}}</td>
<td>{{CompatUnknown()}}</td>
<td>{{CompatUnknown()}}</td>
<td>{{CompatUnknown()}}</td>
<td>{{CompatUnknown()}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Eventos_Relacionais">Eventos Relacionais</h2>
<ul>
<li>{{event("focus")}}</li>
<li>{{event("blur")}}</li>
<li>{{event("focusin")}}</li>
<li>{{event("focusout")}}</li>
</ul>
|
