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
|
---
title: Creación y activación de eventos (Event)
slug: Web/Guide/Events/Creating_and_triggering_events
tags:
- DOM
- Guía
- JavaScript
- Sintetico
- eventos
translation_of: Web/Guide/Events/Creating_and_triggering_events
original_slug: Web/Guide/DOM/Events/Creacion_y_Activación_Eventos
---
<p>En este artículo se muestra cómo crear y activar eventos DOM. Estos eventos son comunmente llamados eventos sinteticos, a diferencia de los eventos gatillados por el navegador.</p>
<h2 id="Crear_eventos_personalizados">Crear eventos personalizados</h2>
<p> Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:</p>
<pre class="brush: js">var event = new Event('build');
// Escucha para el evento.
elem.addEventListener('build', function (e) { ... }, false);
// Disparar event.
elem.dispatchEvent(event);</pre>
<p>El codigo de ejemplo de arriba usa el metodo <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a>. </p>
<p>Este constructor es compatible con la mayoría de los navegadores modernos (con Internet Explorer es la excepción). Para un enfoque más detallado, ver la manera antigua de abajo.</p>
<h3 id="Adición_de_datos_personalizados_con_CustomEvent_()">Adición de datos personalizados con CustomEvent ()</h3>
<p> Para añadir más datos al objeto de evento, existe la interfaz CustomEvent y la propiedad detalle se puede utilizar para pasar los datos personalizados.<br>
<span style="line-height: 1.5;">Por Ejemplo, </span>el evento se puede crear de la siguiente manera<span style="line-height: 1.5;">:</span></p>
<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
<p> Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (<span style="line-height: 19.0909080505371px;">event listener</span>):</p>
<pre class="brush: js">function eventHandler(e) {
log('The time is: ' + e.detail);
}
</pre>
<h3 id="La_Forma_Antigua">La Forma Antigua</h3>
<p> El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:</p>
<pre class="brush: js">// Creamos el evento.
var event = document.createEvent('Event');
/* Definimos el nombre del evento que es 'build'.*/
event.initEvent('build', true, true);
// Asignamos el evento.
document.addEventListener('build', function (e) {
// e.target matches document from above
}, false);
// target can be any Element or other EventTarget.
document.dispatchEvent(event);
</pre>
<h2 id="El_disparo_incorporado_eventos">El disparo incorporado eventos</h2>
<p> Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: </p>
<pre class="brush: js">function simulateClick() {
var event = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('checkbox');
var canceled = !cb.dispatchEvent(event);
if (canceled) {
// A handler called preventDefault.
alert("canceled");
} else {
// None of the handlers called preventDefault.
alert("not canceled");
}
}</pre>
<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidad con los Navegadores</h2>
<h2 id="sect1"> </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;">Internet Explorer</th>
<th style="line-height: 16px;">Opera</th>
<th style="line-height: 16px;">Safari (WebKit)</th>
</tr>
<tr>
<td><code>Event()</code> constructor</td>
<td>15</td>
<td>11</td>
<td>{{ CompatNo() }}</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 Phone</th>
<th style="line-height: 16px;">Opera Mobile</th>
<th style="line-height: 16px;">Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("document.createEvent()")}}</li>
<li>{{domxref("Event.initEvent()")}}</li>
<li>{{domxref("EventTarget.dispatchEvent()")}}</li>
<li>{{domxref("EventTarget.addEventListener()")}}</li>
</ul>
|
