Javascript manualmente disparo .onchange() evento

Question

Tengo un campo de entrada Quiero asignar un nuevo valor y activar un evento .onchange(). Hice lo siguiente:

document.getElementById("range").value='500'; 
document.getElementById("range").onchange(); 

Donde el rango es mi Id de entrada. me sale el siguiente error:

Uncaught TypeError: Cannot read property 'target' of undefined 

¿Hay una manera de definir el 'objetivo'? Gracias

Answer 1

El error sobre target se debe a que hay un código en el controlador de eventos que intenta leer la propiedad target del objeto Event asociado con el evento de cambio. Usted podría tratar de pasar en una imitación de eventos para engañar a ella:

var range= document.getElementById('range'); 
range.onchange({target: range}); 

o, si se puede, cambiar el código del controlador para usar en lugar de thisevent.target.A menos que esté utilizando la delegación (capturando eventos de cambio en el objeto hijo de un elemento primario, algo que es problemático para los eventos de cambio porque IE no los "burbuja"), el objetivo del evento de cambio siempre será el elemento controlador del evento se registró, lo que hace que event.target sea redundante.

Si el controlador de eventos usa más propiedades de Event que solo target, deberá falsificar más o ir a la interfaz del navegador "real" para enviar eventos. Esto también será necesario si los oyentes de eventos pueden estar en uso (addEventListener, o attachEvent en IE) ya que no serán visibles en la propiedad directa onchange. Esto depende del navegador (fireEvent para IE, dispatchEvent para estándares) y no está disponible en navegadores más antiguos o más oscuros.

Answer 2

Intente utilizar fireEvent o dispatchEvent (dependiendo del navegador) para provocar el evento:

document.getElementById("range").value='500'; 
if (document.getElementById("range").fireEvent) { 
    document.getElementById("range").fireEvent("onclick"); 
} else if (document.getElementById("range").dispatchEvent) { 
    var clickevent=document.createEvent("MouseEvents"); 
    clickevent.initEvent("click", true, true); 
    document.getElementById("range").dispatchEvent(clickevent); 
} 

Answer 3

Esto parece funcionar para mí (ver este fiddle). ¿Tiene algún otro código que pueda ser el problema? ¿Cómo definió su controlador onchange?

¿Está llamando e.target en su controlador onchange? Sospecho que este puede ser el problema ... ya que está haciendo el cambio mediante programación, no hay un evento de ventana correspondiente.

Answer 4

de: http://www.mail-archive.com/jquery-en@googlegroups.com/msg44887.html

Sometimes it's needed to create an event programmatically. (Which is different from running an event function (triggering)

This can be done by the following fire code

> var el=document.getElementById("ID1") 
> 
> fire(el,'change') 
> 
> 
> function fire(evttype) { 
>  if (document.createEvent) { 
>   var evt = document.createEvent('HTMLEvents'); 
>   evt.initEvent(evttype, false, false); 
>   el.dispatchEvent(evt); 
>  } else if (document.createEventObject) { 
>   el.fireEvent('on' + evttype); 
>  } } looks like this trick is not yet in jQuery, perhaps for a 
> reason? 

Answer 5

En general, el código debería funcionar bien. Sin embargo, puede haber algo más que esté generando el problema.

• ¿Dónde ejecuta esas dos líneas?
• ¿Estás seguro de que el elemento con el ID range se carga en el momento en que ejecuta el código (por ejemplo, lo ejecuta en document.ready).
• ¿Estas seguro que es suficiente con uno elemento con id range en la página?
• ¿Qué función está haciendo su onchange() (podría ser útil para publicarlo aquí)?

Aparte de eso, yo recomendaría usar jQuery (si es posible):

$('#range').trigger('change'); 

o simplemente

$('#range').change(); 

http://api.jquery.com/change/

Pero como ya he dicho, su caso debe trabajar bien también: http://jehiah.cz/a/firing-javascript-events-properly