javascript - custom - ¿Cómo puedo activar un evento onchange manualmente?

mouseevent javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo activar el evento en JavaScript? 16 respuestas

Estoy configurando un valor de campo de texto de fecha y hora a través de un widget de calendario. Obviamente, el widget del 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. Agregué un detector de eventos onchange al campo de texto de referencia de datos que no se está activando, porque supongo que onchange se activa solo cuando el elemento se enfoca y su valor cambia al perder el foco.

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

Algunas ideas ?

Answer 1

Hay un par de maneras en que puedes hacer esto. Si el servicio onchange escucha onchange es una función establecida a través de la propiedad element.onchange y no le molesta el objeto del evento o la propagación / propagación, el método más sencillo es 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 / attachEvent , necesita hacer un poco de detección de características para attachEvent el evento correctamente:

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

Answer 2

Para aquellos que usan jQuery, hay un método conveniente: http://api.jquery.com/change/

Answer 3

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);