¿Cómo puedo desencadenar un evento onchange manualmente? [duplicate]

3 minutos de lectura

¿Como puedo desencadenar un evento onchange manualmente duplicate
CódigoTweetie

Estoy configurando un valor de campo de texto de fecha y hora a través de un widget de calendario. Obviamente, el widget de calendario hace algo como esto:

document.getElementById('datetimetext').value = date_value;

lo que quiero es:
Al cambiar el valor en el campo de texto de fecha y hora, necesito restablecer algunos otros campos en la página. he añadido un onchange detector de eventos para el datetimetext campo que no se activa, porque supongo onchange se activa solo cuando el elemento recibe el foco y su valor cambia al perder el foco.

Por lo tanto, estoy buscando una manera de activar esto manualmente. onchange evento (que supongo que debería encargarse de verificar la diferencia de valor en el campo de texto).

¿Algunas ideas?

  • $(document.activeElement).trigger(“cambio”);

    – TechDog

    18/03/2016 a las 18:45

  • $().cambio();

    –Luca C.

    15 de junio de 2018 a las 16:31

  • el segundo requiere jquery

    – Scott

    22 de mayo de 2019 a las 16:54

1646965566 323 ¿Como puedo desencadenar un evento onchange manualmente duplicate
Andy E.

Hay un par de formas en las que puedes hacer esto. Si el onchange listener es una función establecida a través del element.onchange propiedad y no le preocupa el objeto de evento o el burbujeo/propagación, el método más fácil es simplemente llamar a esa función:

element.onchange();

Si lo necesita para simular el evento real en su totalidad, o si configura el evento a través del atributo html o addEventListener/attachEventnecesita hacer un poco de detección de funciones para activar correctamente el evento:

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}
else
    element.fireEvent("onchange");

  • Gracias. esto funciona, pero no estoy seguro acerca de la detección del navegador aquí. preguntándome si hay una manera de hacer lo mismo a través de la biblioteca YUI. gracias de todos modos.

    – CódigoTweetie

    18 de mayo de 2010 a las 11:48

  • Gracias. Parece estar funcionando en WebView de Android con esas 3 líneas de else cuadra.

    – Kuitsi

    30 de abril de 2013 a las 13:38

  • Andy E, esto no funciona en IE10, ¿alguna idea?

    – Nick Binnet

    23 de julio de 2013 a las 8:43

  • @NickBinnet: interesante. Estoy trabajando en Linux en este momento y no puedo cambiar para probar una solución, pero sugeriría cambiar el if y else bloques y pruebas de if ('createEvent' in document) en lugar de. Avíseme si esto funciona y actualizaré la respuesta.

    – Andy E.

    24 de julio de 2013 a las 11:37

  • Esta es “La forma antigua”. Ahora hay de otra manera. Ver respuesta de Milán.

    – csr-nontol

    22 de abril de 2020 a las 21:22

¿Como puedo desencadenar un evento onchange manualmente duplicate
Milán Iliev

MDN sugiere que hay una forma mucho más limpia de hacer esto en los navegadores modernos:

// Assuming we're listening for e.g. a 'change' event on `element`

// Create a new 'change' event
var event = new Event('change');

// Dispatch it.
element.dispatchEvent(event);

  • @BrettZamir Funcionó para mí (al menos en Chrome 36) de la siguiente manera: document.querySelector('select.freight').dispatchEvent(new Event('change', { 'bubbles': true }))

    – Slim Shaggy

    06/08/2014 a las 15:10


  • Solo para tu información sobre esto… MDN menciona esto, pero no es compatible con IE10+ (posiblemente también moderno por definición de la palabra moderno…) y solo en las noches de Safari (en el momento de escribir este artículo) IE10+ tiene este método constructor pero debe especificar el tipo de evento, por ejemplo. MouseEvent o KeyboardEvent :ver:- msdn.microsoft.com/en-us/library/ie/dn905219%28v=vs.85%29.aspx

    usuario2667100

    24 de febrero de 2015 a las 3:31


  • Esto no funciona en IE11

    – Joel

    11 de julio de 2016 a las 10:49

  • element.dispatchEvent(new window.Event('change', { bubbles: true })) si quieres burbujear también

    usuario670839

    17 de enero de 2020 a las 22:17

  • Es new CustomEvent('change') ahora (junio de 2020/Covid-19).

    – Mike Mestnik

    6 de junio de 2020 a las 0:41


¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad