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
139
140
141
142
143
144
145
146
|
---
title: Criando e disparando eventos
slug: Web/Guide/Events/Creating_and_triggering_events
tags:
- Avançado
- DOM
- Guía
- JavaScript
- eventos
translation_of: Web/Guide/Events/Creating_and_triggering_events
original_slug: Web/Guide/Events/criando_e_disparando_eventos
---
<p>Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados <strong>eventos sintéticos</strong>, oposto aos eventos disparados pelo próprio navegador.</p>
<h2 id="Criando_eventos_customizados">Criando eventos customizados</h2>
<p>Eventos podem ser criados com o construtor <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> da seguinte forma:</p>
<pre class="brush: js">var event = new Event('build');
// Ouve pelo evento.
elem.addEventListener('build', function (e) { ... }, false);
// Dispara o evento.
elem.dispatchEvent(event);</pre>
<p>Este construtor é suportado na maioria dos navegadores modernos (com o Internet Explorer sendo exceção). Para uma abordagem mais verbosa (a qual é suportada pelo Internet Explorer), veja <a href="#The_old-fashioned_way" title="#The_old-fashioned_way">a forma antiga</a> abaixo.</p>
<h3 id="Adicionando_dados_customizados_–_CustomEvent()">Adicionando dados customizados – CustomEvent()</h3>
<p>Para adicionar mais dados ao objeto do evento, usa-se a interface <a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a>, a qual possui a propriedade <u><strong>detail</strong></u> que pode ser utilizada para fornecer dados customizados.</p>
<p><span style="line-height: 1.5;">Por exemplo, o evento pode ser criado da seguinte forma:</span></p>
<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
<p>Isso permitirá que você acesse dados customizados no listener do evento:</p>
<pre class="brush: js">function eventHandler(e) {
console.log('The time is: ' + e.detail);
}
</pre>
<h3 id="A_forma_antiga">A forma antiga</h3>
<p>A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:</p>
<pre class="brush: js">// Cria o evento.
var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('Event');
// Define que o nome do evento é 'build'.
event.initEvent('build', true, true);
// Ouve pelo evento.
elem.addEventListener('build', function (e) {
// e.target é igual a elem, neste caso
}, false);
// O alvo do evento pode ser qualquer instância de Element ou EventTarget.
elem.dispatchEvent(event);
</pre>
<h2 id="Disparando_eventos_nativos">Disparando eventos nativos</h2>
<p>Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">Veja o exemplo em ação.</a></p>
<pre class="brush: js">function simulateClick() {
var event = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('checkbox');
var cancelled = !cb.dispatchEvent(event);
if (cancelled) {
// Um listener invocou o método preventDefault.
alert("Cancelado");
} else {
// Nenhum listener invocou o método preventDefault.
alert("Não cancelado");
}
}</pre>
<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidade entre navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th style="line-height: 16px;">Feature</th>
<th style="line-height: 16px;">Chrome</th>
<th style="line-height: 16px;">Firefox (Gecko)</th>
<th style="line-height: 16px;">Edge</th>
<th style="line-height: 16px;">Internet Explorer</th>
<th style="line-height: 16px;">Opera</th>
<th style="line-height: 16px;">Safari (WebKit)</th>
</tr>
<tr>
<td><code>construtor Event()</code></td>
<td>15</td>
<td>11</td>
<td>{{CompatVersionUnknown}}</td>
<td>11</td>
<td>11.60</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th style="line-height: 16px;">Feature</th>
<th style="line-height: 16px;">Android</th>
<th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
<th style="line-height: 16px;">IE Mobile</th>
<th style="line-height: 16px;">Opera Mobile</th>
<th style="line-height: 16px;">Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{domxref("document.createEvent()")}}</li>
<li>{{domxref("Event.initEvent()")}}</li>
<li>{{domxref("EventTarget.dispatchEvent()")}}</li>
<li>{{domxref("EventTarget.addEventListener()")}}</li>
</ul>
|
