JavaScript che attiva manualmente l'evento .onchange()

Question

Ho un campo di input Desidero assegnare un nuovo valore e generare un evento .onchange(). Ho fatto quanto segue:

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

Dove intervallo è il mio ingresso Id. ottengo il seguente errore:

Uncaught TypeError: Cannot read property 'target' of undefined 

C'è un modo per definire il 'bersaglio'? Grazie

Answer 1

L'errore su target è dovuto al codice nel gestore eventi che tenta di leggere la proprietà target dell'oggetto Event associata all'evento di modifica. Si potrebbe provare a passare in un faux-evento di ingannare esso:

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

o, se è possibile, modificare il codice del gestore da utilizzare al posto di thisevent.target.A meno che non si stia utilizzando la delega (rilevando gli eventi di cambiamento sull'oggetto figlio da un genitore, qualcosa che è problematico per gli eventi di modifica perché IE non li "bolla"), la destinazione dell'evento change sarà sempre l'elemento il gestore di eventi è stato registrato, rendendo ridondante event.target.

Se il gestore eventi utilizza più proprietà di Event rispetto a target, è necessario simulare di più o passare all'interfaccia del browser "reale" agli eventi di distribuzione. Ciò sarà anche necessario se gli ascoltatori di eventi potrebbero essere in uso (addEventListener o attachEvent in IE) in quanto non saranno visibili sulla proprietà diretta onchange. Questo dipende dal browser (fireEvent per IE, dispatchEvent per gli standard) e non è disponibile per i browser più vecchi o più oscuri.

Answer 2

Provare a utilizzare fireEvent o dispatchEvent (a seconda del browser) per generare l'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

Questo sembra funzionare per me (si veda questo fiddle). Avete qualche altro codice che potrebbe essere il problema? Come hai definito il tuo gestore onchange?

Stai chiamando e.target nel tuo gestore onchange? Sospetto che questo potrebbe essere il problema ... poiché stai facendo la modifica a livello di codice, non c'è alcun evento di finestra corrispondente.

Answer 4

da: 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

In generale, il codice dovrebbe funzionare bene. Potrebbe esserci qualcos'altro che sta emettendo il problema, però.

• Dove gestisci queste due linee?
• Sei sicuro che l'elemento con il range id viene caricato con il tempo si esegue il codice (ad esempio, lo si esegue in document.ready).
• Sei sicuro che hai solo un elemento con ID range nella pagina?
• Qual è la tua funzione onchange() (potrebbe essere utile per postarla qui)?

A parte questo, mi consiglia di utilizzare jQuery (se possibile):

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

o semplicemente

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

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

Ma, come ho già detto, il tuo caso dovrebbe funzionare bene anche: http://jehiah.cz/a/firing-javascript-events-properly