From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../es/web/api/htmlelement/change_event/index.html | 143 +++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 files/es/web/api/htmlelement/change_event/index.html (limited to 'files/es/web/api/htmlelement/change_event/index.html') diff --git a/files/es/web/api/htmlelement/change_event/index.html b/files/es/web/api/htmlelement/change_event/index.html new file mode 100644 index 0000000000..25642a5322 --- /dev/null +++ b/files/es/web/api/htmlelement/change_event/index.html @@ -0,0 +1,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 +--- +
{{APIRef}}
+ +

El evento change 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 change no es disparado necesariamente por cada alteración al valor value del elemento

+ + + + + + + + + + + + + + + + + + + + +
BurbujasSí
CancelableNo
Interfaz{{domxref("Event")}}
Propiedad del manejador del eventoonchange
+ +

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

+ + + +

La especificaciones HTML listan los tipos de <input> que deberían disparar el evento change.

+ +

Ejemplos

+ +

Ejemplos Live: Elemento select

+ +
+

HTML

+ +
<label>Elija un sabor de nieve:
+    <select class="nieve" name="nieve">
+        <option value="">Seleccione Uno …</option>
+        <option value="chocolate">Chocolate</option>
+        <option value="sardina">Sardina</option>
+        <option value="vainilla">Vainilla</option>
+    </select>
+</label>
+
+<div class="resultado"></div>
+ + + +

JS

+ +
const selectElement = document.querySelector('.nieve');
+
+selectElement.addEventListener('change', (event) => {
+    const resultado = document.querySelector('.resultado');
+    resultado.textContent = `Te gusta el sabor ${event.target.value}`;
+});
+
+
+ +

Resultado

+ +

{{ EmbedLiveSample('select-example', '100%', '75px') }}

+ +

Elemento de entrada de texto

+ +

Para algunos elementos, incluyendo <input type="text">, el evento change 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.

+ +

HTML

+ +
<input placeholder="Enter some text" name="name"/>
+<p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('change', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Text_input_element', '100%', '75px') }}

+ +

Especificaciones

+ + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', "indices.html#event-change", "change")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.change_event")}}

+ +

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

-- cgit v1.2.3-54-g00ecf