files/es/web/api/htmlelement/change_event/index.html


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

---
title: 'HTMLElement: Evento change'
slug: Web/API/HTMLElement/change_event
tags:
  - Change
  - DOM
  - Evento
  - HTML
  - Referencia
  - Web
translation_of: Web/API/HTMLElement/change_event
---
<div>{{APIRef}}</div>

<p>El evento <code>change</code> se dispara para elementos {{HTMLElement("input")}}, {{HTMLElement("select")}}, y {{HTMLElement("textarea")}} cuando una alteración al valor de un elemento es confirmada por el usuario. A diferencia del evento {{event("input")}}, el evento <code>change</code> no es disparado necesariamente por cada alteración al valor <code>value</code> del elemento</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Burbujas</th>
   <td>Sí</td>
  </tr>
  <tr>
   <th scope="row">Cancelable</th>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Interfaz</th>
   <td>{{domxref("Event")}}</td>
  </tr>
  <tr>
   <th scope="row">Propiedad del manejador del evento</th>
   <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a></code></td>
  </tr>
 </tbody>
</table>

<p>Dependiendo del tipo de elemento siendo cambiado y la forma en que el usuario interactua con el elemento, el evento <code>change</code> dispara en un momento diferente:</p>

<ul>
 <li>Cuando el elemento es <code>:checked</code> (ya sea dando click o usuando el teclado) para elementos <code>&lt;input type="radio"&gt;</code> y <code>&lt;input type="checkbox"&gt;</code>;</li>
 <li>Cuando el usuario confirma el cambio explícitimante (por ejemplo, al seleccionar un valor de un menú desplegable {{HTMLElement("select")}} con un clic del ratón, al seleccionar una fecha de un selector de fecha de un elemento <code>&lt;input type="date"&gt;</code>, al seleccionar un archivo en un selector de archivo por un elemento <code>&lt;input type="file"&gt;</code>, etc.);</li>
 <li>Cuando un elemento pierde el foco después de que su valor haya sido cambiado, pero no confirmado (es decir, despues de editar el valor de un elemento {{HTMLElement("textarea")}} o <code>&lt;input type="text"&gt;</code>).</li>
</ul>

<p>La especificaciones HTML listan <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">los tipos de <code>&lt;input&gt;</code> que deberían disparar el evento <code>change</code></a>.</p>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Ejemplos_Live_Elemento_select">Ejemplos Live: Elemento select</h3>

<div class="select-example">
<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;label&gt;Elija un sabor de nieve:
    &lt;select class="nieve" name="nieve"&gt;
        &lt;option value=""&gt;Seleccione Uno …&lt;/option&gt;
        &lt;option value="chocolate"&gt;Chocolate&lt;/option&gt;
        &lt;option value="sardina"&gt;Sardina&lt;/option&gt;
        &lt;option value="vainilla"&gt;Vainilla&lt;/option&gt;
    &lt;/select&gt;
&lt;/label&gt;

&lt;div class="resultado"&gt;&lt;/div&gt;</pre>

<div class="hidden">
<pre class="brush: css">body {
  display: grid;
  grid-template-areas: "select  result";
}

select {
  grid-area: select;
}

.resultado {
  grid-area: result;
}

</pre>
</div>

<h4 id="JS">JS</h4>

<pre class="brush: js">const selectElement = document.querySelector('.nieve');

selectElement.addEventListener('change', (event) =&gt; {
    const resultado = document.querySelector('.resultado');
    resultado.textContent = `Te gusta el sabor ${event.target.value}`;
});
</pre>
</div>

<h4 id="Resultado">Resultado</h4>

<p>{{ EmbedLiveSample('select-example', '100%', '75px') }}</p>

<h3 id="Elemento_de_entrada_de_texto">Elemento de entrada de texto</h3>

<p>Para algunos elementos, incluyendo <code>&lt;input type="text"&gt;</code>, el evento <code>change</code> no se lanza hasta que el campo pierde el foco. Prueba a introducir algo en el campo anterior, y luego pulsa en algún otro lugar para lanzar el evento.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">placeholder</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Enter some text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>log<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> input <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">const</span> log <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'log'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

input<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'change'</span><span class="punctuation token">,</span> updateValue<span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="keyword token">function</span> <span class="function token">updateValue</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  log<span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<h4 id="Result">Result</h4>

<p>{{ EmbedLiveSample('Text_input_element', '100%', '75px') }}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "indices.html#event-change", "change")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>


<p>{{Compat("api.HTMLElement.change_event")}}</p>

<p>Diferentes navegadores no siempre concuerdan cuando un evento <code>change</code> debería ser disparado para ciertos tipo de interacciones. Por ejemplo, navegación por teclado en en elementos {{HTMLElement("select")}} nunca disparan el evento <code>change</code> en Gecko hasta que el usuario presiona Enter o cambia el foco fuera del <code>&lt;select&gt;</code> (ver {{bug("126379")}}). A partir de Firefox 63 (Quantum), sin embargo, este comportamiento es consistente entre los mayores navegadores.</p>